2009-09-02 18 views
0

は私がiframeの正確な内容全体を取得して編集する方法を教えてください。

$('iframe').load(function(){ 
    alert($(this).contents().find('body').html()); 
}); 

これは、bodyタグのinnerHTMLプロパティを取得し、あなたがinnerHTMLのは、jQueryを使って、このような何かをやってもらうことができます知っています。しかし、私はすべてそれが欲しい。 HTMLタグとdoctypeが必要です。基本的にソースコード全体。そして私は全体としてそれを編集できるようにしたい。 「全体として」は、私がこのようなことをすることができることを意味します。

$('iframe').html('<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
<head> 
    <title>title</title> 
</head> 
<body> 
hello world 
</body> 
</html>'); 

どうすればよいですか?

注:異なるブラウザでDOMが異なるように処理されるため、OperaのinnerHTMLはFirefoxとは異なる外観になります。しかしそれは大したことではありません。

答えて

0

アクセスしているこのドキュメントは同じサーバーにあるものとします。明らかに、別のウェブサイトのコンテンツにアクセス(および編集)することは非常に危険です。

$('iframe').contentWindow.document.documentElement.outerHTMLには完全なHTMLタグとその内容が含まれます。 outerHTMLはブラウザ間で正確には異なるので、代わりにdocumentElementオブジェクトの属性を解析する必要があります。 outerHTMLは(少なくともWebKitでは)編集できないので、innerHTMLを使用して内容を編集することができます。

$('iframe').contentWindow.document.doctypeは、DOCTYPEを表す。実際のタグは取得できませんが、その属性から情報を取得できます。 Hereは、!DOCTYPE要素のMSDN参照です。

+1

jQueryの 'contentWindow'プロパティを持っていない... – geowa4

+0

、' documentElement':たとえば

?古い学校? – geowa4

+0

はい、同じサーバーにあります。 – fent

0

document.writeはあなたの友人です。また

var iframeEl = document.createElement('iframe'); 
document.body.appendChild(iframeEl); 

var oFrame = window.frames[window.frames.length - 1]; 
oFrame.document.write('<html><head><title>foo</title></head><body>bar</body></html>'); 

oFrame.document.body.innerHTML; // "bar" 
+0

oFrame.documentはx-browserではありません。 'oFrame.contentDocument ||を使うoFrame.contentWindow.document' – geowa4

+0

@ geowa4正確ではありません。 'HTMLIframeElement'の' contentDocument'プロパティ - http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-67133006を 'Window'オブジェクトの' document'プロパティと混同します(利用可能です'window.frames'コレクションを通して)。 iframe要素の 'contentDocument'プロパティではなく、iframeの対応するウィンドウオブジェクトを介してドキュメントにアクセスしていることに注目してください。 – kangax

関連する問題