Question

我正在尝试从开发人员控制台访问嵌套在iframe中的iframe中的一些数据：

Object.keys(document.getElementById("contentBody").
  contentDocument.getElementById('rawContent').
  contentDocument.defaultView.window.messages)

["29c736c0ed25463c8436f4990ab6c6ec.zip", 
 "235819a8cf11488e83f0336603b71711.zip", 
 "66c9260590834d9698568c8a676ef406.zip", 
 "fae95e31cb424cd6ad21302217ef2cdc.zip", 
 "f554f712141047aa9aa24f765073e305.zip", 
 "e5c41819578240e0868f43ab6301aeb3.zip"]

这就是我期待的回报，但我试图从我正在开发的谷歌浏览器扩展程序获得相同的信息，并且由于某些原因我无法访问消息数组，这是清单文件和contentscript.js（我已经尝试了所有想到的东西，并且没有成功地搜索了几个小时：/）：

content.js

var iframeContentBody = document.getElementById('contentBody');
var innerDocContentBody = iframeContentBody.contentDocument;
var iframeRawContent = innerDocContentBody.getElementById('rawContent');
var innerDocRawContent = iframeRawContent.contentDocument; // iframeRawContent is undefined here
console.log(iframeRawContent.messages);  // this prints undefined

清单：

{                                                                                                                                                                                                                  
  "manifest_version": 2,                                                                                                                                                                                           

  "name": "Read Comments",
  "description": "Read all comments from the current forum",
  "version": "1.0",
  "content_scripts": [{
    "matches": ["*://*.forum.net/*"],
    "js": ["content.js"]
  }],
 "browser_action": {
   "default_title": "Read Comments"
 },
 "permissions": ["activeTab", "tabs"]
}

要设置一切：

HTML Example

下载并将这3个文件放在同一个文件夹中后，运行：

python -m SimpleHTTPServer 80 # You may need to run it with sudo

然后转到localhost / test.html并且你已经完成了设置，如果你测试我在控制台中发布的那一行你应该看到[1,2,3]

Extension example

这是扩展代码

开发人员控制台： developers console

带有“all_frames”的Chrome扩展程序：true chrome extension

Hacky解决方案：Partial solution 在这个要点中有一种方法可以做到这一点，很难检测iframe何时被加载，并且很难检测到何时加载了另一个iframe中的iframe，因此setTimeout提供了足够的时间来完成它，然后向dom添加一个脚本元素似乎绕过了chrome扩展可能具有的所有安全措施，它确实获得了该属性的内容而没有任何其他问题，但这似乎是hacky并且它不是我想要做的，我是寻找一个干净的解决方案或一个干净的方式来访问嵌套iframe的dom，如示例代码所示......

谢谢，欢迎提出任何建议。

Answer 1

毕竟，这是我的解决方案，在我们讨论评论和研究文档和其他线程之间：

内容脚本：

(function () {
  document.addEventListener("DOMContentLoaded", function () {
    contentBody = document.getElementById("contentBody");
    contentBody.addEventListener("load", function () {
      rawContent = contentBody.contentDocument.getElementById("rawContent");
      if (rawContent) {
        var s = document.createElement("script");
        s.src = chrome.extension.getURL('injected.js');
        s.onload = function() {
          this.parentNode.removeChild(this);
        };

        (document.head||document.documentElement).appendChild(s);
      }
    });
  });
})();

注册文件：

keys = Object.keys(document.getElementById("contentBody").contentDocument.getElementById("rawContent").contentDocument.defaultView.window.messages);

console.log(keys);

清单：

{
  "manifest_version": 2,

  "name": "Read Comments",
  "description": "Read all comments from the current forum",
  "version": "0.0.1",

  "content_scripts": [{
    "matches": ["*://localhost/*"],
    "run_at": "document_start",
    "js": ["content.js"]
  }],

  "browser_action": {
    "default_title": "Read Comments"
  },

  "permissions": [
  ],

  "web_accessible_resources": ["content.js", "injected.js"]
}

作为一个简单的解释，主要问题是iframe的asyc负载以及扩展代码运行的时刻，因此在听了很多事件并丢弃那些没有dom所需元素的事件后，一切都去了细...

Answer 2

为了完整性，这是一个"all_frames":true的版本。有两个问题需要解决：（1）从内部框架到顶部获取messages和（2）从网页的孤立世界获取messages到内容脚本的孤立世界（我假设你想做的不仅仅是将messages写入控制台。这可以使用postMessage一次解决这两个问题。

if ( window.top !== window.parent ) {
    var s = document.createElement("script");
    s.textContent = "postMessage(messages,'*');";
    s.onload = function() {
        this.parentNode.removeChild(this);
    };
    document.head.appendChild(s);
} else if ( window.top === window ) {
    addEventListener('message',function(e) {
        console.log(e.data);
    });
}

我必须承认我实际上没有测试过它。您可能需要尝试制作注入的脚本send a message from the webpage。

访问DOM元素数据文档 - ＆gt; iframe - ＆gt; iframe-＆gt;方法chrome扩展名

2 个答案: