如何使用iframe或shadow dom创建跨浏览器的子文档？
我想用JavaScript创建一个完全封装的子文档，它有自己的<head>、<body>、样式、html和js。基本上是一个卷影dom或iframe，但没有src属性。
虽然我喜欢影子dom的想法，但它的support is very low,，因此还没有准备好在黄金时段。
因此，我一直致力于创建iframe，但在此过程中遇到了各种障碍。Here is a jsFiddle demonstrating my various attempts.
iframe不能存在于dom中。这部分很关键。为了澄清，如果它暂时存在于dom中是可以的，但它必须能够被提取并且只存在于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中或另一个元素中？以下两种尝试都不起作用，因为选择器没有上下文或其他东西...
$('body').append(iframe3Contents);
var generatedIframe = $('<iframe />').append(iframe3Contents);我希望能够创建iframe / subdocuemnt，而不需要在dom中添加任何东西。但是如果必须的话，我仍然希望能够随后将其从dom中删除，并在js中进一步管理它。
我有一个小函数，它不起作用，但说明了我想要创建的iframe或子文档生成器的类型
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;
}
}回答 2
Stack Overflow用户
发布于 2014-02-17 04:49:23
要从框架中访问信息(或写入框架)，这些信息必须在DOM中。它可以被隐藏，但它仍然必须存在于frames对象中。JQuery通过iFrame对象访问frames，从dom中删除时，它也会从frames对象中删除
对于将来遇到这个问题的任何人，您可以像这样获得封装：
$('#iframeGenerator2').contents().find('html').html(frame2HTML);下面是一个例子：http://jsfiddle.net/yP34y/4/
在jsfiddle示例中，请注意，只有在添加到DOM之后，所有内容才能正常工作。
Stack Overflow用户
发布于 2014-02-21 22:25:30
我玩弄了你的小提琴，并能让它工作起来。我正在使用seamless (只有Chrome)来使它的行为更符合你正在寻找的东西，并且我有一个适用于其他浏览器的CSS后备。
注意，在开始编辑其内容(添加样式和正文)之前，需要将iframe添加到DOM中。您可以删除之后的document.body.removeChild(iframe);。
您仍然可以做很多事情来使它的行为非常类似于影子DOM元素，本演示文稿将帮助您解决Seamless iframes: The future, today!问题
JS
var styles = '<style> .pink { color: pink; width: 100px; height: 100px; } body{background-color:#eee;}</style>';
var html = '<div class="pink">PINK!</div>';
// create iframe
var iframe = document.createElement('iframe');
document.body.appendChild(iframe);
//add head and body
iframe.contentDocument.open();
iframe.contentDocument.write(styles);
iframe.contentDocument.write(html);
iframe.contentDocument.close();
iframe.setAttribute('seamless', 'seamless');
//check everything
console.log(iframe);
var head = $(iframe).contents().find('head')[0];
console.log(head);
var body = $(iframe).contents().find('body')[0];
console.log(body);
//remove from DOM
//document.body.removeChild(iframe);CSS
iframe[seamless]{
background-color: transparent;
border: 0px none transparent;
padding: 0px;
overflow: hidden;
}https://stackoverflow.com/questions/21739382
复制相似问题