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 Tampermonkey1 (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
1 It will also work as a straight-up Chrome userscript if you remove the unsafeWindow
line(s).