Moving Frame Content to Div element using JavaScript with jQuery

Hello.

I am learning jQuery, and working on my current practice project am attempting to use it to move the content of a an iframe to a div element in its parent frame. Help in getting it to function would be appreciated.

The content the Iframe is loaded with begins with the below lines


<html>
<head>

<script type="text/JavaScript" language="JavaScript" src="../javascript/jquery-1.4.2.min.js"></script>
<script type="text/JavaScript" language="JavaScript">

$(document).load(function() {
  
  var xhtml = window.document.body;
  $(\\'#p3\\', window.parent.document).load( xhtml );
  $(\\'#p3\\', window.parent.document).addClass(\\'displayelement_block\\');
  $(\\'#frame\\', window.parent.document).addClass(\\'hideelement\\');
  
  window.location.hash="p3";
  
});

</script>
</head>
<body>

Its rather straightforward, p3 is the div I want to load the content to with this function which should be triggered once the frame has finished loading (or once the DOM is ready, should not matter).

Any input on where I am mistaken? It is not important that I use jQuery for this.

P.S. The escape characters are there due to it being passed into the iframe by PHP.

The first line looks mysterious - load is for loading ajax content. Don’t you mean ready()?

This will be impossible if the iframe content is from a different domain. Also, since an iframe contains an entire HTML document, do you just want to copy the content of the BODY into this DIV? If so, I’d do it like this, from the parent:

document.getElementById('frame').onload = function() {
  document.getElementById('p3').innerHTML = this.contentWindow.document.body.innerHTML;
}

If you put that just before the closing </body> tag it’ll run when the outer DOM has loaded.

Thank you for the reply.

load() is also an event handler in jQuery, I am using http://api.jquery.com/ as a reference.

Are you suggesting I should put that code in the parent or in the iframe. In the latter case I cannot refer to the parents divs as such, it is easily modified however. In the case of putting it in the parent I am having issues with how the onload works.

I can get the content movement itself to work with this function in the parent frame.


function testf() { 
		alert('test');
		document.getElementById('p3').innerHTML = framename.document.body.innerHTML;
}

The issue I am having is that whilst the iframe is empty at entering the parent page, it still triggers the onload events (which removes the iframe…). I need this to happen specifically when the content has been added to the iframe.

Can I somehow call a javascript function in the parent from the iframe?

P.S. It was unneccessary of me trying to add the “hideelement” class to the iframe, since it will no longer be there anyway. Thus overlook that part. What I am trying to do is to move the iframe content into the div in which the iframe is.

The content is from the same domain.

I solved it by binding the parent.function to the onLoad event of the body tag/node (whats the correct terminology in DOM context?).

Thank you for the heads up Raffles.

If something else comes up with this issue I will use the thread again. pleased

I think I missunderstood your note about load(), assuming now you were referring to the one in the function. After further usage I have became more acquainted with its behaviour. It is indeed an Ajax function which resends the complete page request.

The above works by using html(). No code following this statement is processed, since the frame is gone by then. So it needed some restructuring.