javascript - Chrome 扩展程序中出现错误 "Cannot read property ' style' of null"

Question

作为一名 javascript 初学者，我想创建一个扩展程序，以便在用户在 Google Chrome 中指向 URL 时显示模式。在我将 HTML + CSS + JS 放入一个文件中的 HTML 中，它工作正常，但将其放入 Chrome 扩展程序中会出现此错误消息:“无法读取 null 的属性‘样式’”对于行 “模式。 content_script.js 中的 style.display = "block";"。看来模态为空并且模态不显示。我看不出我做错了什么。

content_script.js 与 JS:

var modal  = document.createElement ('iframe');
modal.src  = chrome.extension.getURL ('./options.html');
document.body.appendChild (modal);

var modal = document.getElementById("myModal");

document.addEventListener('mousemove', function (e) {
  var srcElement = e.srcElement;
  if (srcElement.nodeName == 'A') {
        modal.style.display = "block";
    }
  if (srcElement.nodeName != 'A') {
        modal.style.display = "none";
    } 
}, false);

options.html - HTML 中的模式内容:

<div id="myModal" class="modal">

  <!-- Modal content -->
  <div class="modal-content">
    <div class="modal-header">
      <span class="close">&times;</span>
      <h2>Modal Header</h2>
    </div>
    <div class="modal-body">
      <p>Some text in the Modal Body</p>
      <p>Some other text...</p>
    </div>
    <div class="modal-footer">
      <h3>Modal Footer</h3>
    </div>
  </div>

</div>

list .json

{
   "background": {
      "persistent": false,
      "scripts": ["background.js" ]
   },

   "browser_action": {
   "default_icon": "icon128.png"
   },

   "content_scripts": [ {
      "js": ["content_script.js"],
      "matches": [ "http://*/*", "https://*/*" ],
      "css" : ["css.css"],
      "run_at": "document_end"
   } ],

   "description": "Description",
   "icons": {
      "128": "icon128.png",
      "16": "icon16.png",
      "48": "icon48.png"
   },

   "web_accessible_resources": [
    "options.html"]
   ,

   "manifest_version": 2,
   "name": "Name",
   "permissions": [ "tabs", "http://*/*", "https://*/*" ],
   "version": "1.0"
}

Answer 1

安<iframe>是一个单独的文档。其内容无法从 <iframe> 所在的文档直接访问。存在。事实上，出于安全原因，此类文档之间的访问可能会受到限制，这也是使用 iframe 的原因之一。

您的代码:

var modal = document.getElementById("myModal");

正在尝试访问 <iframe> 的内容通过在顶层搜索 document 。 iframe 的内容不存在于顶级文档中，因此 ID 为 myModal 的元素没有找到。因此，modal现在是null ，这会导致您的错误。您需要在 <iframe> 中搜索 ID文档，可通过 .contentDocument 访问:

var myModalDiv = modal.contentDocument.getElementById("myModal");

注意:部分混淆是使用相同的变量名来引用您的 <iframe>并尝试引用顶部 <div> <iframe>内。您不应该以这种方式重复使用变量名称，因为它会导致您的变量所代表的内容产生困惑。在大多数情况下，变量的命名应与其所代表的内容相匹配。通常，没有理由以这种方式重用变量名。如果您打算这样做并且变量将表示多个事物，那么应该在变量的名称中指出。