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

Question

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.

you can always execute code in the `window.frames[x]` fashion. Just append whatever command you want. I.E. `window.frames[0].runFunction()` — LoveAndCoding, Nov 01 '11 at 00:30
How I can do the same in IE? I find it extremely difficult to select an element in the console window using $ if the element is located in an inner IFRAME. Please help. — tarekahf, May 26 '17 at 15:59

score 173 · Accepted Answer · edited Feb 08 '17 at 14:33

173

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

edited Feb 08 '17 at 14:33

Community

1
1

answered Nov 01 '11 at 01:44

Dennis

32,200
11
64
79

8

Can I execute code in the console to accomplish this same thing, or do I have to click the frame selector? – bodine Aug 07 '13 at 23:25
@bodine - have you found a way to accomplish it from the console command ? – arty Feb 11 '14 at 11:58
1

Note that this dropdown is now at the top of the console, rather than the bottom. – Muhd May 08 '14 at 18:51
1

I don't see this in Chrome 38. Couldn't quickly figure out how to do this in Chrome; used the cd(frames[]) in Firefox instead. – Akrikos Oct 30 '14 at 14:51
Note in Firefox you can also select an iframe via element picker, then do `cd($0)` instead of pointing to it via ID – jakub.g Nov 25 '14 at 16:04
1

What a shame. It won't retain the selected frame if the frame's content is changed. It switches back to "top frame" – bryc Apr 01 '15 at 03:07
How I can do the same in IE? I find it extremely difficult to select an element in the console window using $ if the element is located in an inner IFRAME. Please help. – tarekahf May 26 '17 at 16:08

score 23 · Answer 2 · edited Jul 08 '15 at 19:28

23

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

window.frames[0].runFunction()

edited Jul 08 '15 at 19:28

rink.attendant.6

44,500
61
101
156

answered Nov 01 '11 at 01:30

LoveAndCoding

7,857
2
31
55

A nice alternative if FireBug is your weapon of choice. Thanks. – Surreal Dreams Apr 18 '12 at 02:20
1

How would you execute code outside of functions like jQuery commands? Or if you wanted to get a reference to a DOM element under some frame then execute code against that element? – David May 12 '14 at 22:21
So as an example would be: `window.frames[0].alert()` – Shayan Dec 08 '19 at 15:58

score 7 · Answer 3 · edited Sep 02 '15 at 13:35

7

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

edited Sep 02 '15 at 13:35

SuperBiasedMan

9,814
10
45
73

answered Sep 02 '15 at 10:25

Andreyka Bonart

95
1
1

2

Welcome to Stack Overflow! Please consider editing your post to add more explanation about what your code does and why it will solve the problem. An answer that mostly just contains code (even if it's working) usually wont help the OP to understand their problem. – SuperBiasedMan Sep 02 '15 at 13:35
Thanks! This is an odd way for firefox to do it, but I guess "cd(iframe)" is what you enter in the console to switch context. I gave you a +1 b/c you saved me tons of head-banging, but you should really polish up this post and explain it! – Scott Smith Jan 30 '17 at 08:04

score 6 · Answer 4 · answered Aug 11 '16 at 18:31

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:

score 4 · Answer 5 · answered Dec 03 '13 at 14:34

4

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

answered Dec 03 '13 at 14:34

Sebastian

51
2

It is exactly what I was looking for. (it works in Firefox) Thanks. – user2410595 Jul 08 '14 at 16:54

score 4 · Answer 6 · edited May 23 '17 at 12:10

4

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.

edited May 23 '17 at 12:10

Community

1
1

answered Nov 01 '11 at 01:53

Muhd

24,305
22
61
78

score 1 · Answer 7 · edited Feb 10 '22 at 08:32

1

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);");

edited Feb 10 '22 at 08:32

Super Kai - Kazuya Ito

22,221
10
124
129

answered Feb 05 '22 at 20:02

Carter

59
1
2
3

It doesn't work for me, I get an `Uncaught DOMException: Permission denied to access property "eval" on cross-origin object` even disabling cross-origin validations in the about:config (Firefox). – ffernandez Apr 22 '23 at 16:51

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

7 Answers7

Linked