iframe 操作 (クロスドメイン解決など)_html/css_WEB-ITnose

注: iframe がページに埋め込まれると、実際には新しい完全なウィンドウ オブジェクトが dom 上に作成されます

iframe からメイン フォームを取得します

window.top (トップ ウィンドウのウィンドウ オブジェクト) )

window.parent (現在の iframe の親ウィンドウ)

多層ネストされた iframe window.parent.parent.... を取得します

必要なウィンドウを取得した後、親ドキュメントのコンテンツを操作できます

例: window.top.document.getElementById(''xxx");

メインフォームで iframe が属するウィンドウオブジェクトを取得します

window.frames['iframe の名前'] (経由iframe の name 属性)

document.getElementById("HtmlEdit").contentWindow; (ネイティブでは、すべての主要なブラウザが contentWindow 属性をサポートしています)

例:

参考: http://blog.csdn.net/dongzhiquan/article/details/5851201

例 (メイン ウィンドウで iframe の更新を操作します ):

document.getElementById('FrameID').contentWindow.location.reload(true);

jquery を使用して attr の更新を直接操作することもできます: $('#frameID').attr ('src','http://xxx');

ブラウザの同一オリジン ポリシー: 1. 異なるソースからのドキュメントを ajax 経由でリクエストすることはできません。 2. 異なるドメインのフレーム間で JS 対話を実行することはできません。ブラウザ

iframe にクロスドメインが含まれる場合、この時点で iframe ウィンドウ オブジェクトへのアクセスが制限されます

Chrome プロンプト:

Uncaught SecurityError: オリジン "http://123.57.6.131" のフレームへのアクセスがブロックされましたオリジン「http://localhost:9000」のフレーム。プロトコル、ドメイン、およびポートが一致する必要があります。

firefox プロンプト:

プロパティ "xxx" へのアクセス許可が拒否されました

ここには 2 つの状況があります。

1 . サブレベル ドメイン名

間のクロスドメイン 2. 全く異なるドメイン名間のクロスドメイン

1. サブレベル ドメイン名間のクロスドメイン操作では、同じ document.domain を指定するだけです

例:

http://www.example.com/a.html と http://example.com/b.html

これら 2 つのページの document.domain を同じドメイン名に設定するだけです。 document.domain をそれ自身またはそれ以上の上位の親ドメインにのみ設定でき、メイン ドメインも同じである必要があり、障害なくアクセスして対応する操作を実行できます

2.全く異なるドメインの場合は、値を渡します（iframeが属するwindowオブジェクトのlocation.hashを通して値を渡します）

2.1 メインフォームからiframeに値を渡します

location.hashを操作しても、 iframe 全体を再ロードして更新するには、これを実行してから、iframe の onhashchange イベントをリッスンすることができます

例:

//主窗体中传递json数据到iframe:var url;var data = {name:'xx',age:26};var tmp = encodeURI( JSON.stringify(center) );$('#iframe_id').attr('src',url+'#'+tmp);//iframe中接收 window.onhashchange = function () {    var hash_str = decodeURI( window.location.hash.replace('#','').toString() );    var data = JSON.parse( hash_str ); }// 这样一旦当url hash值改变,iframe就可以进行相应调整// 如果要兼容ie8之类不支持onhashchange事件的浏览器// 可以用setInterval()判断是否发生改变,然后调用相应函数

参考: http://stackoverflow.com/questions/3090478/jquery-hashchange-イベント

2.2 iframe のメインフォームに渡されます

メインフォーム a と同じドメイン名で新しいページ c を作成する必要があります

次に iframe b に埋め込まれた iframe の src 値はページ c、

c の URL ハッシュ値は iframe b でも同様に操作でき、

a、c は同じドメイン名で透過的にアクセスでき、c の window オブジェクトへのクロスドメインアクセスはありません。同一起源の制限。