dez*_*man 18 javascript iframe jquery shadow-dom
我想在JavaScript中创建一个完全封装的子文档,有自己的<head>,<body>,样式,HTML和JS.基本上是阴影dom或iframe,但没有src属性.
虽然我喜欢影子dom的想法,但它的支持率非常低,因此尚未准备好迎接黄金时段.
所以我一直在努力创建一个iframe,但一路上都遇到了各种各样的障碍.这是一个jsFiddle,展示了我的各种尝试.
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;
}
}
要从框架访问信息（或写入框架），它必须位于 DOM 中。它可以被隐藏，但它仍然必须存在于框架对象中。JQuery 通过框架对象访问 iFrame，当从 dom 中删除时，它也会从框架对象中删除
为了将来任何遇到这个问题的人参考，您可以像这样获得封装：
$('#iframeGenerator2').contents().find('html').html(frame2HTML);
这是一个例子： http: //jsfiddle.net/yP34y/4/
在 jsfiddle 示例中，请注意所有内容仅在添加到 DOM 后才起作用。
| 归档时间： |
|
| 查看次数： |
1766 次 |
| 最近记录： |