将整个文档移动到iframe中 [英] Move the whole document into an iframe
问题描述
我要做的是将一个完整的网站包装在 iframe 中，而不会破坏任何样式或javascript。
What I'm trying to do is wrap a complete website in an iframe without breaking any styling or 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'));
参见 http://jsfiddle.net/gUJWU/3/
这在Chrome中运行良好。
This works fine in Chrome.
Firefox似乎吞下了整个页面。
Firefox seems to swallow the whole page.
Internet Explorer（参见 http://jsfiddle.net/gUJWU/3/show/ ）确实创建 iframe ，不动什么东西进入它。
Internet Explorer (see http://jsfiddle.net/gUJWU/3/show/) does create the iframe, doesn't move anything into it.
这种方法是否有机会跨浏览器工作？
Does this approach have any chance of working cross-browser?
推荐答案
在IE中，文档不会被推断并自动创建，因此您需要在访问它之前实际创建它：
In IE, the document isn't inferred and automatically created, so you need to actually 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/
这似乎适用于IE8 / 9，最近的Firefox和Chrome，至少。
This seems to work in IE8/9, and recent Firefox and Chrome, at least.
我找出问题的方法是 console.log ging $ frame.contents（）。find（'head'）。length ，在IE中为0。
The way I figured out the problem is by console.logging $frame.contents().find('head').length, which was 0 in IE.
这篇关于将整个文档移动到iframe中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
