This link (archived version) describes how to inject code from a script into an iframe:
function injectJS() { var iFrameHead = window.frames["myiframe"].document.getElementsByTagName("head")[0]; var myscript = document.createElement('script'); myscript.type = 'text/javascript'; myscript.src = 'myscript.js'; // replace this with your SCRIPT iFrameHead.appendChild(myscript); }
That's ok, but what if I want to insert a function object into an iframe and get it executed in the iframe context? Let's say I have:
function foo () { console.log ("Look at me, executed inside an iframe!", window); }
and I want to insert foo's code inside an iframe? (function foo could be something loaded dynamically, I can't just wrap it in quotes)
I naively tried:
var scriptFooString = "<script>" + foo.toString() + "</script>"
to get the code inside function, but
scriptFooString
Any hint?
As long as the protocol, domain and port of the parent page and iframe match, everything will work fine. I added an example on how to use the window.
To call JavaScript function in an iframe, we get the window object of the iframe with the contentWindow property. document. getElementById("resultFrame"). contentWindow.
The usual solution is to use window. parent in the frame to get "up" (into the document which contains the iframe tag). Now you can call any method in the container document. This method can manipulate the frame (for example call some JavaScript in the frame with the parameters you need).
Developers can get around these by going to the console and finding selectors to manipulate the website's document object model (DOM) by adding or modifying CSS or JavaScript. But now, thanks to Google Chrome and its extension store, anyone can inject code into any website automatically.
First of all you can only accomplish this if your frame and the page displaying it is within the same domain (Due to cross-domain rules)
secondly you can manipulate dom and window objects of the frame directly through JS:
frames[0].window.foo = function(){ console.log ("Look at me, executed inside an iframe!", window); }
to get your frame from a DOMElement object you can use:
var myFrame = document.getElementById('myFrame'); myFrame.contentWindow.foo = function(){ console.log ("Look at me, executed inside an iframe!"); }
Note that the scope in foo is NOT changed, so window is still the parent window etc. inside foo.
If you want to inject some code that needs to be run in the context of the other frame you could inject a script tag, or eval it:
frames[0].window.eval('function foo(){ console.log("Im in a frame",window); }');
Though the general consensus is to never use eval, I think its a better alternative than DOM injection if you REALLY need to accomplish this.
So in your specific case you could do something like:
frames[0].window.eval(foo.toString());
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With