Is there a way to change context to iframe in javascript console?

JavascriptIframeConsoleFirebug

Javascript Problem Overview


I would like to change the context of the javascript executed in the webkit developer tool/firebug console to execute its code like it is running from inside an iframe on the page.

I know I could do this by opening the page in the iframe on a separate page, but I want to run code where it interacts with the parent frame.

Javascript Solutions


Solution 1 - Javascript

Chrome 15 allows you to change the scope of the console. On the bottom of the console, next to the clear console button, there is a menu that says <top frame> which will give a list of available frames:

enter image description here

Firefox has a similar feature currently in development:

enter image description here


You can also navigate across frames using the command line:

var frame = document.getElementById("frame1").contentWindow;
cd(frame);

Solution 2 - Javascript

You can execute code in <iframe>s by using the window.frames[x] functionality. For example,

window.frames[0].runFunction()

Solution 3 - Javascript

In today's Chrome (version 52), all you have to do is select the iframe in the "Elements" tab of the dev tools. Anything you run in the JS console will automatically run in the context of the selected iframe.

For example, here I've selected an iframe, and when I type document.location.pathname into the console it returns the src attribute of the iframe, instead of the URL from the address bar:

enter image description here

Solution 4 - Javascript

For firebug solution see this answer on another SO question. Doesn't work cross-domain like Dennis's Chrome solution however.

Edit: With newer versions of firebug they may have fixed cross-domain issue.

Solution 5 - Javascript

Execution of script statements and commands by default is done in context of the top-level window. If you are using frames, use the "cd()" console command.

cd() Calling cd() without parameters returns to the top-level window.

cd(window) Allows you to change command-line expression evaluation from the default top-level window of the webpage to the window of a frame.

More info, here

Solution 6 - Javascript

cd(document.getElementsByTagName('iframe')[0]);

Solution 7 - Javascript

For people using firefox, cd() does not work.

Instead, a possible workaround is to call eval() on the iframe's contentWindow to run javascript in the context of the iframe.

var frame = document.getElementById("MyIframe").contentWindow;
frame.eval("alert(1);");

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionMuhdView Question on Stackoverflow
Solution 1 - JavascriptDennisView Answer on Stackoverflow
Solution 2 - JavascriptLoveAndCodingView Answer on Stackoverflow
Solution 3 - JavascriptdpercyView Answer on Stackoverflow
Solution 4 - JavascriptMuhdView Answer on Stackoverflow
Solution 5 - JavascriptSebastianView Answer on Stackoverflow
Solution 6 - JavascriptAndreyka BonartView Answer on Stackoverflow
Solution 7 - JavascriptCarterView Answer on Stackoverflow