現在のページのDOMを変数にロードし、それをJavaScriptでiframeに書き込むにはどうすればよいですか？

ここに記載されている方法（https://stackoverflow.com/a/10433550/556079）を使用して、別のURLから読み込むのではなく、与えたHTMLを読み込むiframeを作成しています。ロードしたいHTMLは、現在のページのDOM全体です（基本的にはそれを反映しています）。現在のページのDOMを変数にロードし、それをJavaScriptでiframeに書き込むにはどうすればよいですか？

上記のリンク先のコードは次のとおりです。これは、iframeにもっと多くのHTMLを必要とすることを除いて、完全に動作します。

var iframe = document.createElement('iframe'); 
var html = '<body>Foo</body>'; 
document.body.appendChild(iframe); 
iframe.contentWindow.document.open(); 
iframe.contentWindow.document.write(html); 
iframe.contentWindow.document.close();

ご覧のとおり、<body>Foo</body>はiframeにロードされています。私はやってみた：var html = document;しかし、これは動作しませんでした。

このコードはChrome拡張機能で使用されているため、Chromeで動作させる必要があります。これを行うための私の推論は、私はiframeのコードを操作したいです。残念ながら、Chromeではローカルページ間での会話は許可されず、ローカルページではこのChrome拡張機能を使用しています。

アイデア？

出典

2016-12-01 jkupczak

あなたは、またはouterHTML（その意志）（<body>と</body>を含まないであろう）innerHTMLを経由して現在のドキュメントのbodyのマークアップを読み取ることができます。 headも必要な場合は、document.headでも同じことができます。両方が必要な場合は、これらの2つを組み合わせるか、document.documentElement（これはhtml要素です）を使用します。あなたはDOCTYPEが必要な場合、それは（DocumentType objectある）document.doctypeにあります：

だから、例えば：

var iframe = document.createElement('iframe'); 
var html = ""; 
// Reassemble the doctype if there is one 
if (document.doctype && document.doctype.name) { 
    html = "<!doctype " + document.doctype.name; 
    if (document.doctype.publicId) { 
     html += " PUBLIC " + document.doctype.publicId; 
    } 
    if (document.doctype.systemId) { 
     html += " " + document.doctype.systemId; 
    } 
} 
// Add in the document's markup 
html += document.documentElement.outerHTML; 
document.body.appendChild(iframe); 
iframe.contentWindow.document.open(); 
iframe.contentWindow.document.write(html); 
iframe.contentWindow.document.close();

すべての3つ（innerHTML、outerHTML、およびdocument.doctype）今標準化されています。最初の2つはDOM Parsing and Serialization specで、HTML仕様のcommon infrastructureセクションから参照され、document.doctypeはDOM specificationです。

出典

2016-12-01 18:33:56

ソースにある文字通りすべてのものを取得するにはどんな方法でも、それを自分で追加しなくても、doctypeとhead？ – jkupczak

@jimmykup：上記は、 'head'を取得する方法を説明しています。あなたは 'document.doctype'からdoctypeを得ることができます。（私は上記を更新しました） –

私はいくつかの検索を行い、 'document.documentElement.outerHTML'が' head'と 'body'を同時に取得し、' 'タグを取得していることがわかりました。しかし、 'document.doctype'はiframeに' [object DocumentType] 'を返します。どのようにその固定を得るための任意のアイデア？ – jkupczak

現在のページのDOMを変数にロードし、それをJavaScriptでiframeに書き込むにはどうすればよいですか？

答えて

関連する問題