Question

我想在JavaScript中创建一个完全封装的子文档，它有自己的<head>，<body>，样式，html和js。基本上是阴影dom或iframe，但没有src属性。

虽然我喜欢影子dom的想法，但它support is very low,并没有为黄金时间做好准备。

所以我一直在努力创建一个iframe，但是一路上都遇到了各种各样的障碍。 Here is a jsFiddle demonstrating my various attempts.

dom中不存在iframe。这部分很关键。为了澄清，它可以暂时存在于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;
  }
}

Answer 1

要从帧中访问信息（或写入帧），它必须位于DOM中。它可以隐藏，但它仍然必须存在于框架对象中。 JQuery通过frames对象访问iFrame，当从dom中删除时，它从frame对象中删除

为了将来参考任何绊倒这个问题的人，你可以得到这样的封装：

$('#iframeGenerator2').contents().find('html').html(frame2HTML);

以下是一个示例：http://jsfiddle.net/yP34y/4/

在jsfiddle示例中，请注意一切只有在添加到DOM后才能正常工作。

Answer 2

我和你的小提琴一起玩，并且能够让它运转起来。我正在使用无缝（仅限Chrome）使其行为更符合您的要求，并且我有其他浏览器的CSS后备。

作为一个注释，在开始编辑ifres内容（添加样式和正文）之前，需要将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;
}

如何使用iframe或shadow dom创建跨浏览器子文档？

2 个答案: