监听 iframe 内的 DOM 变化答案

【问题标题】：Listen DOM changes inside iframe监听 iframe 内的 DOM 变化
【发布时间】：2015-10-31 20:01:13
【问题描述】：

我需要监听 iframe 标签内的变化。主页没有改变，只有 iframe 内容。

iframe 页面具有表单，当单击某些按钮类型提交时，表单会调用操作并仅在 iframe 内更改页面。

接下来我会探测，但仅适用于文档主页，只有主页文档会监听 DOM 更改，但不在 iframe 内。

function listener()
{
    console.debug("listener fired.");
}

document.addEventListener('DOMSubtreeModified', function() {
    var iframes = document.getElementsByTagName("iframe");
    for (var i = 0, len = iframes.length, doc; i < len; ++i) {
    // Catch and ignore errors caused by iframes from other domains
    console.log(i);
    try {
        doc = iframes[i].contentDocument || iframes[i].contentWindow.document;
        //console.log(doc);
        doc.addEventListener("DOMSubtreeModified", listener, true);
    } catch (ex) { console.log(ex); }
}   
},false);

【问题讨论】：

那么会发生什么？您是否有权访问 iframe？
我无法访问 iframe 页面，因为是编译的 .aspx 页面，这就是我需要使用 chrome 扩展的原因。
我认为唯一的选择是注入一个脚本元素，其代码可以检测到到 iframe 的更改。请参阅Building a Chrome Extension - Inject code in a page using a Content script 和顺便说一句不要使用DOMSubtreeModified，由于速度慢，它已被弃用数年。使用MutationObserver 或基于计时器的检查；

标签： javascript html iframe google-chrome-extension dom-events

【解决方案1】：

我找到了一个解决方案，使用 Google Extensions API 我只是使用了内容脚本和后台页面之间的通信，然后每次更改都会在网页中进行，后台页面会向内容脚本发送一条消息，然后重新加载再次内容脚本，让我评估我在网页中需要的内容。背景页面对我来说是最好的解决方案，因为它始终处于活动状态。

背景页面

chrome.tabs.onUpdated.addListener(function (tabId, changeInfo, tab) {          
   if (changeInfo.status == 'complete') {   
      chrome.tabs.query({active: true, currentWindow: true}, function(tabs){
         chrome.tabs.sendMessage(tabs[0].id, {action: "doit"}, function(response) {});  
      });
   }
});

内容脚本

chrome.extension.onMessage.addListener(function(msg, sender, sendResponse) {
   if (msg.action == 'doit') {
      analize_with_content_script();
   }
});

注意analize_with_content_script()是收到后台页面消息后触发的函数。

记住背景页面需要在manifest文件中声明。

【讨论】：