我有一个 chrome/firefox 网络扩展。单击时，此 Web 扩展会将一个 DIV 附加到 <body> 的内部，其中包含多个其他 DIV 和一个嵌套结构中的 iFrame。网站 HTML 文件中的元素。它通过使用内容脚本来做到这一点。
这是 onMessage 的简化代码内容脚本中的监听器:
browser.runtime.onMessage.addListener((message) => {
var iFrame = document.createElement("iFrame");
iFrame.id = "contentFrame";
iFrame.style.cssText = "width: 100%; height: 100%; border: none;";
iFrame.src = browser.extension.getURL("inject.html");
var boxDiv = document.createElement("div");
boxDiv.style.cssText = "background: white; box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 9px 8px; height: 100%; left: calc(100% - 390px); position: fixed; top: 0px; width: 390px; z-index: 1;"
var zeroDiv = document.createElement("div");
zeroDiv.style.cssText = "position: fixed; width: 0px; height: 0px; top: 0px; left: 0px; z-index: 2147483647;";
var outerDiv = document.createElement("div");
boxDiv.appendChild(iFrame);
zeroDiv.appendChild(boxDiv);
outerDiv.appendChild(zeroDiv);
document.body.appendChild(outerDiv);
var closeButton1 = document.getElementById("contentFrame").contentWindow.document.getElementById("close-btn");
console.log("Close Button1 Fetched: " + closeButton1);
//closeButton.onClick = function () {
// console.log("Close button clicked");
//}
returnSummary(message.summaryLength, message.targetURL).then(summary => {
var closeButton2 = document.getElementById("contentFrame").contentWindow.document.getElementById("close-btn");
console.log("Close Button2 Fetched, Setting Listener: " + closeButton2);
closeButton2.onClick = function() {
console.log("Close button clicked");
}
});
});
对于上下文 - returnSummary是一个包含一堆获取请求的异步函数。
奇数部分如下:
第一条日志语句:console.log("Close Button1 Fetched: " + closeButton1);返回 null ,
但是第二个日志语句:console.log("Close Button2 Fetched, Setting Listener: " + closeButton2);返回 [object HTMLButtonElement] .
因此，document.getElementbyId异步请求完成后似乎正在工作。为什么会发生这种情况，如何检索 ID 为 close-btn 的 HTML 元素的值？越早越好？ (我想在按钮上设置一个 onClick 监听器)。
另一个奇怪的问题是，即使我设置了 onClick对象的方法closeButton2 ，点击“关闭按钮”什么都不做。但是，这不是这篇文章的主要问题。
这里还有“inject.html”中的 HTML(顶部大部分只是 CSS):
<!DOCTYPE html>
<html style="height: 100%">
<!-- TODO: Create Loader -->
<head>
<link href="https://fonts.googleapis.com/css?family=Nunito:700,800" rel="stylesheet">
<style>
.btn {
width: 25%;
height: 35px;
cursor: pointer;
border: 2px solid currentcolor;
border-radius: 5px;
background-color: white;
color: dodgerblue;
font-family: 'Nunito', sans-serif;
font-weight: 800;
font-size: 16px;
text-align: center;
}
.btn:hover {
background: #2196F3;
color: white;
}
#summary {
width: 100%;
height: 90%;
min-height: calc(100% - 75px);
max-height: calc(100% - 55px);
margin: 0;
padding-left: 8px;
padding-right: 8px;
box-sizing: border-box;
overflow-y: auto;
font-family: 'Nunito', sans-serif;
font-weight: 700;
font-size: 14px;
color: #52575C;
white-space: pre-line;
}
</style>
</head>
<body style="height: 100%; margin: 0;">
<div style="width: 100%; height: 10%; min-height: 55px; max-height: 75px; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-evenly; align-items: center;">
<button class="btn" id="close-btn">Close</button>
<button class="btn" id="copy-btn">Copy</button>
</div>
<p id="summary"/> Loading Summary...
</p>
</body>
</html>
最佳答案
您无法访问该元素的原因是 iframe 加载是一个异步过程。因此，您可以使用类似的东西:
iframe.onload = function() {
//在这里做点什么；
}
另一种方法是使用轮询直到元素加载完毕，显然您需要在那里添加超时检查。当您处理外部 DOM 并且不确定何时加载它时，这尤其有用。
关于javascript - Web 扩展 - document.getElementById 在执行异步方法之前返回 null，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49943993/