How do I access an iframe's javascript from a userscript?

Question 1

How do I access an iframe's javascript from a userscript?

javascript google-chrome iframe greasemonkey tampermonkey

Skinner927 · Jul 24, 2012 · Viewed 7.2k times · Source

Answer

Answer

unsafeWindow doesn't play nice with frames/iframes on Chrome, Tampermonkey, or Firefox.
Trying to access global (to the frame) JS with jQuery, like that, will not work.
userscripts will run on iframes that meet the @include, @exclude, and/or @match requirements.

So, you need to account for the multiple script runs and then you have two basic approaches, depending on what you are trying to accomplish. You can:

(A) Tailor the script to specific frame(s), as in this answer.

or (B) inject your JS and use the special frames object to grab the specific function you want.

The following script demonstrates both. Install it in Tampermonkey¹ (or Firefox Greasemonkey), and then visit this test page at jsBin.

// ==UserScript==
// @name        _Calling iframe functions
// @namespace   _pc
// @include     http://jsbin.com/ugoruz/*
// @include     http://jsbin.com/okequw/*
// ==/UserScript==

console.log ("Script start...");

/*--- This next function call will work in Firefox or Tampermonkey ONLY,
    not pure Chrome userscript.
*/
console.log ("calling functionOfInterest ()...");
unsafeWindow.functionOfInterest ();


if (window.top === window.self) {
    //--- Code to run when page is the main site...
    console.log ("Userscript is in the MAIN page.");

    //--- The frames object does not play nice with unsafeWindow.
    /*--- These next three work in Firefox, but not Tampermonkey, nor pure Chrome.
    console.log ("1", frames[1].variableOfInterest);                // undefined
    console.log ("2", unsafeWindow.frames[1].variableOfInterest);   // undefined
    console.log ("3", frames[1].unsafeWindow);                      // undefined
    */
    /*--- This next would cause a silent crash, all browsers...
    console.log ("4", unsafeWindow.frames[1].unsafeWindow.variableOfInterest);
    */

    //--- To get at iFramed JS, we must inject our JS.
    withPages_jQuery (demoAccessToFramedJS);
}
else {
    //--- Code to run when page is in an iframe...
    console.log ("Userscript is in the FRAMED page.");
    console.log ("The frame's ID is:", window.self.frameElement.id);
}


function demoAccessToFramedJS ($) {
    $("body").prepend (
          '<button id="gmMain">Run JS on main window</button>'
        + '<button id="gmFrame">Run JS on iframe</button>'
    );

    $("#gmMain, #gmFrame").click ( function () {
        if (this.id === "gmMain") {
            functionOfInterest ();
        }
        else {
            frames[1].functionOfInterest ();
        }
        console.log (this.id + "was clicked.");
    } );
}

function withPages_jQuery (NAMED_FunctionToRun) {
    //--- Use named functions for clarity and debugging...
    var funcText        = NAMED_FunctionToRun.toString ();
    var funcName        = funcText.replace (/^function\s+(\w+)\s*\((.|\n|\r)+$/, "$1");
    var script          = document.createElement ("script");
    script.textContent  = funcText + "\n\n";
    script.textContent += 'jQuery(document).ready(function() {'+funcName+'(jQuery);});';
    document.body.appendChild (script);
};

console.log ("Script end");

You will see that the script runs a function from both the main page and from the iframe. The console output (Tampermonkey) will be:

Tampermonkey started
Script start...
calling functionOfInterest ()...
Userscript is in the MAIN page.
Script end
Tampermonkey started
Script start...
calling functionOfInterest ()...
Userscript is in the FRAMED page.
The frame's ID is: iframe2
Script end

¹ It will also work as a straight-up Chrome userscript if you remove the unsafeWindow line(s).

Question 2

I'm trying to use a Chrome userscript or a Tampermonkey script to modify a page with this structure:

<body>
content up here

<iframe id="main" src="foo.dat"></iframe>
</body>

The iframe is same-origin.

I need to access a function that's in iframe#main. I thought I could use unsafeWindow to get it but I keep getting nothing or undefined returned.

I've tried a slew of things:

Tried creating a new script element in the iframe, but it attaches to the parent even with $('frame#main').contents().append(script) or $('frame#main').contents()[0].createElement('script')
window.frames["#main"].contentWindow returns undefined.

I have tried many other things I can't recall at the moment, but I have exhausted all my ideas and feel that I'm typing rubbish more than anything that counts.
I can't figure out how to play with the unsafeWindow of the iFrame.

How do I access an iframe's javascript from a userscript?

Answer

Related questions