Geek asks and answers

Replace _top window contents with iframe content without reloading the page

Is it possible to replace the contents of the browser window (_top frame) with a document loaded in an iframe without issuing a new GET to load this document?

Something like that:

<html>
<head>
<script type="text/javascript" language="JavaScript">
$(document).ready(function() {
  $("#link").click(function() {
    // should present in the browser window the content of the iframe WITHOUT reload
    // even preserve javascript/head code
    $(document).html($("#frameDestination").html());
  });
});
</script>
</head>
<body>
<a id="link" href="#">full window</a>
<iframe id="frameDestination" src="http://www.some-random-site.com" width="900px" height="500px"></iframe>
</body>
</html>
+5
source share
2 answers

Use content () when working with iframes in jQuery.

$("#YourIframe").contents().find("html").html();

This will only work if the iframe is in the same domain as the parent.

+1
source

I have not tested the cross-domain, but in the same domain I have this script working:

$(document).ready(function() {
  $("#link").click(function() {
    var iframeBody = document.getElementById("frameDestination").contentDocument,
    head = iframeBody['head'].innerHTML, 
    body = iframeBody['body'].innerHTML;
    $('body').html( body );
    $('head').html( head );
  });
});

In the latest Firefox, I can even set the variable in the script tag in the frame and see this value in _top after clicking the link.

+1
source

More articles:


All Articles