All geek questions in one place

Move entire document in iframe

What I'm trying to do is wrap the complete website in an iframe without breaking style or javascript.

Here is what I tried:

 var $frame = $('<iframe />').css({ position: 'fixed', top: 0, left: 0, width: '100%', height: '100%' }).appendTo('body'); $('head').children().appendTo($frame.contents().find('head')); $('body').children().not($frame).appendTo($frame.contents().find('body'));

See http://jsfiddle.net/gUJWU/3/

This works great in Chrome.

Firefox seems to be swallowing the entire page.

Internet Explorer (see http://jsfiddle.net/gUJWU/3/show/ ) creates an iframe , doesn't move anything into it.

Does this approach have the ability to work with a cross browser?

+4
source share
1 answer

In IE, the document is not displayed and is not created automatically, so you need to create it before accessing it:

 var $frame = $('<iframe />').css({ position: 'fixed', top: 0, left: 0, width: '100%', height: '100%' }).appendTo('body'); var doc = $frame[0].contentDocument || $frame[0].contentWindow.document; doc.open(); doc.write("<!DOCTYPE html><html><head><title></title></head><body></body></html>"); doc.close(); $('head').children().appendTo($frame.contents().find('head')); $('body').children().not($frame).appendTo($frame.contents().find('body'));

DEMO: http://jsfiddle.net/XAMTc/show/

This seems to work in IE8 / 9, as well as the latest Firefox and Chrome, at least.

The way I figured out the problem is console.log ging $frame.contents().find('head').length , which was 0 in IE.

+6
source

Source: https://habr.com/ru/post/1497302/

More articles:


All Articles