How to get access to iframe element

Question

I have the following html and javascript. If I click on simulate event I want the HandleEvents function to post the text into the 'child' page html. So I am essentially trying to latch onto an html element inside a child web page from a parent.

How do I do that?

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script type="text/javascript">

function _bindEvent(el, eventName, eventHandler) {
        if (el.addEventListener){
           el.addEventListener(eventName, eventHandler, false); 
        } else if (el.attachEvent){
           el.attachEvent('on'+eventName, eventHandler);
        }
}

function doconfigure() {
   var ifrm = document.getElementById('ifrm');
   if(ifrm) {
      ifrm.src="configure.html";
   }
}

function doevents() {
   var ifrm = document.getElementById('ifrm');
   if(ifrm) {
      ifrm.src="show_events.html";
   }
}

function dooutbound() {
       var ifrm = document.getElementById('ifrm');
       if(ifrm) {
          ifrm.src="outbound.html";
       }
}

function HandleEvents(data) {

    //post data to show_events.html page
    var ifrm = document.getElementById('ifrm');
    if(ifrm) {
        ifrm.src="show_events.html";
    }

    //post to events field
    var elem = top.frames['display'].document.getElementById('event');
    if(elem) {
        elem.innerHTML = data;
    }
}

</script>

<title></title>

</head>
<body>
<fieldset>
<legend>Select</legend>
<input type="button" value="Configure" onclick="doconfigure();">
<input type="button" value="Events" onclick="doevents();">
<input type="button" value="Outbound" onclick="dooutbound();">
<input type="button" value="simulate event" onclick="HandleEvents('my event');">
<br />
</fieldset>
<iframe src="configure.html" name="display" id="ifrm" height="700" width="800">
  <p>Your browser does not support iframes.</p>
</iframe>


</body>
</html>

Then the show_events.html page:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title></title>
</head>
<body>
  <p>Events:</p>
  <p id="event"></p>
</body>
</html>

You have to wait until the frame is [fully loaded](http://stackoverflow.com/questions/1463581/waiting-for-an-iframe-to-load-before-passing-information-to-it) before you can access the elements. — epascarello, Apr 01 '13 at 16:08

score 1 · Answer 1 · answered Apr 01 '13 at 16:14

You will not be able to do this unless the IFRAME shares the same origin as the parent script (for CSRF-protection purposes). If this requirement is met, it's all good.

jQuery is strongly recommended for this as things can get very, very messy very quickly.

You can gain access to the DOM of the IFRAME using the following:

jQuery (Fiddle: http://jsfiddle.net/ZYxVA/)

var myIFRAME = $("iframe#test");
var myContent = $("html",myIFRAME.contents());

Native (Fiddle: http://jsfiddle.net/L8Cek/)

var myIFRAME = document.getElementById("test");
var mC = myIFRAME.contentDocument,
   mCbody = mC.getElementsByTagName("body")[0];
var docE = document.createElement("div");
docE.innerHTML = "this is a test";
mCbody.appendChild(docE);

As you can probably tell by now, jQuery is strongly recommended due to the fact that your code will get very hairy, very quickly otherwise. The quick run-down is, $("iframe").contents() allows you to get contentDocument. From there, you can run queries against that DOM by passing it as the second parameter.

In addition to this, you also will not be able to do anything until the iframe is fully loaded. You can listen to this by binding an onLoad event on it.

Point taken re JQuery, however I am trying to learn baisc javascript first. — Angus Comber, Apr 01 '13 at 18:33

score 0 · Accepted Answer · answered Apr 01 '13 at 16:14

You need to wait for the iframe to be fully loaded before you can access the elements in the iframe.

Basic idea:

function HandleEvents (data) {

    var myIframe = document.getElementById('ifrm');
    myIframe.onload = function() {
        var innerDoc = myIframe.contentDocument || myIframe.contentWindow.document;
        var myElement = innerDoc.getElementById('event');
        myElement.innerHTML = data;
    };
    myIframe.src = 'show_events.html';

}

How to get access to iframe element

2 Answers2