JavaScriptを使用して<iframe>要素を作成し、それをDOMに追加する必要があるプロジェクトがあります。その後、<iframe>にコンテンツを挿入する必要があります。これは、サードパーティのWebサイトに埋め込まれるウィジェットです。
ページをロードしたくないので、<iframe>の「src」属性を設定しません。むしろ、CSSに遭遇したり、JavaScriptが親ページと競合したりしないように、挿入したコンテンツを分離/サンドボックス化するために使用されます。JSONPを使用してサーバーからHTMLコンテンツをロードし、この<iframe>に挿入しています。
私はこれを正常に機能させていますが、1つの重大な例外があります-document.domainプロパティが親ページ(このウィジェットがデプロイされている特定の環境にある可能性があります)、Internet Explorer(おそらくすべてのバージョンですが、私は6、7、および8)で確認したところ、作成したこの<iframe>のドキュメントオブジェクトにアクセスしようとすると、「アクセスが拒否されました」というエラーが表示されます。私がテストした他のブラウザ(すべての主要な最新のブラウザ)では発生しません。
Internet Explorerでは、相互に通信するすべてのウィンドウ/フレームのdocument.domainを同じ値に設定する必要があることを認識しているため、これはある程度意味があります。ただし、アクセスできないドキュメントにこの値を設定する方法を知りません。
誰かがこれを行う方法を知っていますか?どういうわけか、この動的に作成された<iframe>のdocument.domainプロパティを設定しますか?それとも私はそれを正しい角度から見ていません-この問題にぶつかることなく私が目指していることを達成する別の方法はありますか?分離/サンドボックス化されたウィンドウはこのウィジェットの機能にとって重要であるため、どのような場合でも<iframe>を使用する必要があります。
これが私のテストコードです:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Document.domain Test</title>
<script type="text/javascript">
document.domain = 'onespot.com'; // set the page's document.domain
</script>
</head>
<body>
<p>This is a paragraph above the <iframe>.</p>
<div id="placeholder"></div>
<p>This is a paragraph below the <iframe>.</p>
<script type="text/javascript">
var iframe = document.createElement('iframe'), doc; // create <iframe> element
document.getElementById('placeholder').appendChild(iframe); // append <iframe> element to the placeholder element
setTimeout(function() { // set a timeout to give browsers a chance to recognize the <iframe>
doc = iframe.contentWindow || iframe.contentDocument; // get a handle on the <iframe> document
alert(doc);
if (doc.document) { // HEREIN LIES THE PROBLEM
doc = doc.document;
}
doc.body.innerHTML = '<h1>Hello!</h1>'; // add an element
}, 10);
</script>
</body>
</html>
私はそれをホストしました:
http://troy.onespot.com/static/access_denied.html
このページをIEにロードするとわかるように、alert()を呼び出した時点で、<iframe>のウィンドウオブジェクトにハンドルがあります。そのドキュメントオブジェクトについて、これ以上深く理解することはできません。
助けや提案をありがとう!これに対する解決策を見つけるのを手伝ってくれる人には誰にでもお世話になります。