我试图从JavaScript值传递给HTML的浏览器扩展程序。我不断收到一个错误，所引用的元素为null。
popup.html
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script type="text/javascript" src="popup.js"></script>
</head>
<body>
<div>
<h3>Output</h3>
<br>
<output id="outputKey">Output goes here</output>
</div>
</body>
</html>
popup.js
chrome.storage.sync.get("key", function (value) {
console.log("Output key value: " + value["key"]);
console.log("Popup output key value: " + document.getElementById("outputKey"));
//Set document.getElementById("outputKey") to value["key"]
});
其结果是，从存储器中检索它们密钥值是有效的，并使用console.log("Output key value: " + value["key"]);当记录到控制台正确。我想将该值设置为output元素并将其显示在popup.html值。我收到写着document.getElementById("outputKey")是空的错误。
我想知道，这是因为被点击浏览器的扩展按钮时，才会显示扩展的页面。我尝试添加没有运气以下。
popup.js
...
window.onload = function () {
chrome.storage.sync.get("key", function (value) {
console.log("New key value: " + value["key"]);
document.getElementById("outputKey") = value["key"];
});
你的代码运行在DOM完全加载之前。相反onload的执行代码后的DOM满载DOMContentLoaded。这将确保该元素在DOM当你引用/使用。
请注意：您还可以使用该元素的性质类似textContent，innerText，value等设定值。
document.addEventListener("DOMContentLoaded", function(event) {
chrome.storage.sync.get("key", function (value) {
console.log("New key value: " + value["key"]);
document.getElementById("outputKey").value = value["key"];
}
});
使用下面的代码：
document.getElementById("outputKey").value = value["key"];