Question

作为javascript初学者，我想创建一个扩展程序，以便在用户在Google Chrome中指向某个网址时显示模式。在我将HTML + CSS + JS放在一个文件中的HTML中，它工作正常，但将它放入Chrome扩展程序会收到以下错误消息：“无法读取行"modal.style.display = "block";"中的属性'样式'为null” content_script.js。似乎模态为null并且模态没有出现。我看不出我做错了什么。

带有JS的content_script.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>

的manifest.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>。您不应该以这种方式重用变量名称，因为它会对您的变量所代表的内容产生混淆。在大多数情况下，应该命名变量以匹配它所代表的变量。通常，没有理由以这种方式重用变量名称。如果您打算这样做并且变量将代表多个事物，那么应该在变量的名称中表示。

错误“无法在Chrome扩展程序中读取属性'样式'为null”

1 个答案: