Question

Just wondering if it’s possible to change a label or element in a iframe from another iframe that are both loaded on the same page?

I have 2 iframes on a page:

<iframe id="leftMenu" src="menu.htm" STYLE="top:90px" NAME="menu" width="270px" frameborder="0"></iframe>

<iframe src="page.htm" STYLE="top:90px" NAME="AccessPage" width="100%" height="100%" frameborder="0"></iframe>

From page.htm (2nd iframe) I want to be able to change a value by an ID to something else on the 2nd iframe.

For Example:
menu.htm (1st iframe) has a label on that page..

<label id="test">test1234</label>

From the page.htm (2nd iframe) I want to change the value of that label.

I have tried doing the following but had no luck:

document.getElementById('leftMenu').contentWindow.document.getElementById('test').value = 'test successful';

Answer 1

Use window.parent like this:

    window.parent.document.getElementById('leftMenu').contentWindow.document.getElementById('test').innerHTML = "Replaced Successful!"

And instead of .value use .innerHTML

See a working DEMO: http://jsfiddle.net/rathoreahsan/G2un4/4/

Tested locally and working fine also.