如何使用iframe或shadow dom创建跨浏览器子文档？ [英] How to create a cross-browser sub document with iframe or shadow dom?
问题描述
我想在JavaScript中创建一个完全封装的子文档，它有自己的< head> ，< body> ，styles，html和js。基本上是影子dom，或iframe，但没有src属性。
I want to create a totally encapsulated sub-document in JavaScript, with its own <head>, <body>, styles, html, and js. Basically a shadow dom, or an iframe, but without an src attribute.
虽然我喜欢影子dom的想法，但它的支持非常低，因此尚未准备好迎接黄金时段。
Though I love the idea of shadow dom, its support is very low, and thus is not ready for prime time.
所以我一直在工作在创建一个iframe，但沿途遇到了各种路障。 这是一个jsFiddle，展示了我的各种尝试。
So I have been working on creating an iframe, but have been hitting various road-blocks along the way. Here is a jsFiddle demonstrating my various attempts.
dom中不存在iframe。这部分很关键。为了澄清，如果它暂时存在于dom中是可以的，但它必须能够被提取并且仅存在于JS中。
The iframe cannot exist in the dom. This part is critical. To clarify, it is okay if it momentarily exists in the dom, but it must be able to be extracted and exist only in JS.
$('body').append('<iframe id="iframeGenerator" />');
var iframe3 = $('#iframeGenerator');
var iframe3Contents = iframe3.contents();
$('#iframeGenerator').remove();
var head = iframe3.contents().find('head');
甜蜜，我们有头
console.log(head.length);
但内容是什么样的？
console.log(iframe3Contents.get(0));
这是一个文件，但不在元素
内，所以让我试试吧在dom或另一个元素里面？
以下两种尝试均无效，因为选择器没有上下文或其他内容...
It is a document, but not inside of an element so lets try to put it in the dom or inside of another element? both of the following attempts don't work because the selector has no context or something ...
$('body').append(iframe3Contents);
var generatedIframe = $('<iframe />').append(iframe3Contents);
我希望能够创建iframe / subdocuemnt而无需向dom添加任何内容...但如果我必须，我仍然希望能够随后将它从dom中移除并在js中进一步管理。
I would love to be able to create the iframe / subdocuemnt without appending anything to the dom... but if I must, I would still like to be able to subsequently remove it from the dom and manage it further in js.
我有这个小功能，它不会工作，但说明了我想创建的iframe或子文档生成器的种类
I have this little function, which doesn't work, but illustrates the kind of iframe or subdocument generator I would like to create
var iframeHtml;
giveMeIframe = function() {
var iframeContents;
if (iframeHtml) {
return iframeHtml;
} else {
$('body').append('<iframe id="iframeGenerator" style="display: none" />');
iframeContents = $('#iframeGenerator').contents();
iframeHtml = $('<iframe />');
iframeHtml.append(iframeContents);
$('#iframeGenerator').remove();
return iframeHtml;
}
}
推荐答案
到从帧中访问信息（或写入帧），它必须在DOM中。它可以隐藏，但它仍然必须存在于框架对象中。 JQuery通过frames对象访问iFrame，当从dom中删除时，它从框架对象中移除
To access info from the frame (or write to the frame), it must be in the DOM. It can be hidden, but it still must live in the frames object. JQuery is accessing the iFrame through the frames object and when removed from the dom, it's removed from the frames object
为了将来参考任何绊倒这个问题的人，你可以得到这样的封装：
For future reference to anyone stumbling across this question, you can get the encapsulation like so:
$('#iframeGenerator2').contents().find('html').html(frame2HTML);
以下是一个例子： http://jsfiddle.net/yP34y/4/
在jsfiddle示例中，请注意一切只有在它之后才有效添加到DOM。
In the jsfiddle example, notice everything only works after it's been added to the DOM.
这篇关于如何使用iframe或shadow dom创建跨浏览器子文档？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
