将整个文档移动到 iframe 中

2024-02-03

我想做的是将一个完整的网站包装在一个iframe不破坏任何样式或 JavaScript。

这是我尝试过的:

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/ http://jsfiddle.net/gUJWU/3/

这在 Chrome 中运行良好。

Firefox 似乎吞噬了整个页面。

Internet Explorer(请参阅http://jsfiddle.net/gUJWU/3/show/ http://jsfiddle.net/gUJWU/3/show/)确实创建了iframe,不会将任何东西移入其中。

这种方法有可能跨浏览器工作吗?


在 IE 中,文档不会被推断和自动创建,因此您需要在访问它之前实际创建它:

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/ http://jsfiddle.net/XAMTc/show/

这似乎至少在 IE8/9 以及最近的 Firefox 和 Chrome 中有效。

我解决问题的方法是console.logging $frame.contents().find('head').length,在 IE 中为 0。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

将整个文档移动到 iframe 中 的相关文章