Create iframes from original page content with jQuery

Question

I am trying to dynamically "rewrite" an entire page to a set of iframes. I want a music player bar at the bottom iframe and the original page "rewritten" in an iframe above/behind that. Almost just like SMC player. I feel like I'm close but I am a jQuery novice.. So any pointers will be greatly appreciated beforehand.

Here's the main part that creates the iframes that's not working correctly.

var oldpage =  "<html>" + $("html").html() + "</html>";
$('body').html( "<iframe frameborder='0' id='content' allowtransparency='true' name='content'></iframe>" );
$('#content').contents().find('html').html(oldpage);
$('body').append("<iframe id='stratus' allowtransparency='true' frameborder='0' scrolling='0'>");

I'm trying to load the entire original html on line 1. Then creating iframes and trying to inject the oldbody variable into the new iframe #content. The iframes are created but the #content iframe has a blank body.

feeela · Accepted Answer · 2012-09-14 16:01:27Z

1

I don't know why, but you can't replace the whole HTML element, only its contents:

// create raw frame
var frame = $('<iframe id="maincontent" style="position:absolute; top: 0; left: 0; width: 50%; height: 50%;"><html></html></iframe>');

// store a copy of current document contents
var copiedHead = $('head').clone();
var copiedBody = $('body').clone();

// empty the current document
$(':not(iframe) body *').remove();

// load the copy into the frame;
// it's not possible to replace the whole HTML element;
// using plain JS DOM function here, since jQuery would strip out any SCRIPT and STYLE tags
frame.load(function(){
    $(this).contents().find('html')[0].replaceChild(copiedHead[0] , $(this).contents().find('head')[0]);
    $(this).contents().find('html')[0].replaceChild(copiedBody[0] , $(this).contents().find('body')[0]);
}).appendTo('body');

answered Sep 14, 2012 at 16:01

feeela

30k7 gold badges61 silver badges73 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

PadreD727 Over a year ago

Worked like a charm, thank you! It is odd you that can't select the entire html content.

PadreD727 Over a year ago

Now I have one other problem. Maybe I'll start a new post but when I click a link in the #content iframe it just reloads the main page and doesn't follow the link.

Collectives™ on Stack Overflow

Create iframes from original page content with jQuery

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related