0

I need to listen changes inside iframe tag. The main page doesn't change, only iframe contents.

Iframe pages have form, when some buttons type submit are clicked the form call the action and change the page only inside the iframe.

I probe next, but only works with document main page, only main page document listen for DOM changes, but not inside 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);
pinguik
  • 23
  • 7
  • so what does happen? Do you have access inside the iframes? – charlietfl Oct 31 '15 at 20:05
  • I don't have access on iframe pages because are compiled .aspx pages, that's why I need to do it with chrome extensions. – pinguik Oct 31 '15 at 20:21
  • 1
    I think the only choice is to inject a script element with code that detects the changes *into* the iframe. See [Building a Chrome Extension - Inject code in a page using a Content script](https://stackoverflow.com/q/9515704) and BTW don't use `DOMSubtreeModified`, it's deprecated for several years due to being slow. Use [MutationObserver](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver) or a timer-based check; – wOxxOm Oct 31 '15 at 20:59

1 Answers1

1

I've found a solution, with Google Extensions API I just used communications between content script and a background page, then every change made it in the web page, the background page send to the content script a message and then it reloads again the content script and let me evaluates what I need in the web page. Background page is the best solution for me because is always active.

background page

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) {});  
      });
   }
});

content script

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

Note analize_with_content_script() is the function that is trigger after receive the message from background page.

Remember background page needs to be declare in the manifest file.

pinguik
  • 23
  • 7