私は、それ自身で、JavaScriptで完全にカプセル化されたサブ文書を作成したい<head>、<body>、スタイル、HTML、およびJS。基本的にはshadowdomまたはiframeですが、src属性はありません。
私はシャドウドムのアイデアが大好きですが、そのサポートは非常に低く、プライムタイムの準備ができていません。
そのため、私は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);
domに何も追加せずにiframe / subdocuemntを作成できるようにしたいと思います...しかし、必要な場合は、後でそれを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はframesオブジェクトを介してiFrameにアクセスしており、domから削除されると、framesオブジェクトから削除されます。
この質問に出くわした人への将来の参照のために、次のようにカプセル化を取得できます。
$('#iframeGenerator2').contents().find('html').html(frame2HTML);
次に例を示します：http：//jsfiddle.net/yP34y/4/
jsfiddleの例では、すべてがDOMに追加された後にのみ機能することに注意してください。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加