javascript document.getElementById in other frames

Question

I have two frames and want to access an element in one frame from another:

Frame 1:

<div id='someId'>...</div>

Frame 2:

var div=document.getElementById('someId');

div.innerHTML='something';

This is somehow not functioning in Firefox so I want to be sure, can I access an element in another frame by its ID?

score 27 · Accepted Answer · answered Nov 27 '09 at 09:45

27

You can refer the other frame by using

window.frames["framename"]

and then you can refer the element in the DOM by using

window.frames["framename"].document.getElementById ( "yourelementid" );

answered Nov 27 '09 at 09:45

rahul

184,426
49
232
263

so, there is no option that browser would find first available element with desired ID no matter in which frame that reside ? – ante.sabo Nov 27 '09 at 09:51
3

@as: `getElementByid` is restricted to looking in the `document` object of which it is a method. Bear in mind that a frame is in fact a separate `window` object, and an examination of the `window`->`document` hierarchy should make it clear why a method on one `document` cannot examine a `document` in a different `window`. – NickFitz Nov 27 '09 at 10:18
6

It's not wirking in chrome, `window.frames['framename'].document` has nothing inside it. I mean `windows.franes['framename'].ducumnet.getElementById(...)...` results `Uncaught TypeError: Cannot call method 'getElementByName' of undefined` error. – Mohammad Jafar Mashhadi Aug 06 '13 at 19:56
This doesn't work for me, The answer from @Brian Duncan do! – Valmond Jan 11 '17 at 08:33

Brian Duncan · Answer 2 · 2016-02-26T18:49:55.307

13

The issue may be the current frame you are in. If window.frames['framename'] does not work, try parent.frames['framename'] to access the top level frames.

if(parent.frames && parent.frames['framename']) {
   var elem = parent.frames['framename'].document.getElementById(...); 
   // etc
}

edited Feb 26 '16 at 18:49

answered Dec 18 '14 at 20:22

Brian Duncan

1,176
1
13
21

score 1 · Answer 3 · answered Jan 07 '16 at 18:50

1

I was having problem with the JS version but was able to use these examples for a working jQuery version:

var obj = $('#yourelementid', parent.frames["framename"].document);

answered Jan 07 '16 at 18:50

Flea

11,176
6
72
83

score 1 · Answer 4 · answered May 15 '20 at 21:13

1

document.getElementById('frameId').contentDocument.getElementById('frameChild');

answered May 15 '20 at 21:13

Erisan Olasheni

2,395
17
20

score 0 · Answer 5 · answered Oct 13 '17 at 17:39

0

Or, if you feel like trying your luck, you can just use a numeric parameter.

window.frames[0].document

answered Oct 13 '17 at 17:39

goodhyun

4,814
3
33
25

score 0 · Answer 6 · edited May 26 '19 at 19:06

0

For some reason

window.frames["framename"].document.getElementById ( "yourelementid" );

was not working for me.

This other method did:

   document.getElementById('framename').contentWindow.document.getElementById('yourelementid');

edited May 26 '19 at 19:06

slfan

8,950
115
65
78

answered May 26 '19 at 18:40

drset

141
1
5

score 0 · Answer 7 · answered Dec 30 '22 at 02:01

Simply use frameId.MyElementId

Of course, when defining your frame, not enough to use "name=....", rather use "id=..." within your frame tag. E.g.:

    <iframe id=MyFrame> .... 
          <input id=MyElementId>
               ...

    <script>
       // do something with MyElementId
           MyFrame.MyElementId.value = "something";

At least, it works as of 2022 (almost 2023).

[Note that I didn't even use "name"... that's quite not necessary by these days, unless you want to use radio buttons with multiple <INPUT's that refer to the same mutually exclusive element]

javascript document.getElementById in other frames

7 Answers7

Linked