javascript - 监听 iframe 内 DOM 的变化

Question

我需要监听 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);

Answer 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()是收到后台页面消息后触发的函数。

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