IFRAME内の巧妙なクロスドメインリンクフレーム

著者zhangl

IFRAMEは何ですか

• IFRAMEのhtmlタグはDOM要素であります

効果

• Webページが別のページに埋め込まれていてもよいです
  • ナビゲーションタブバー、オンライン編集、プロダクト・プレイスメントなど
• 前方のブラウザにサイトのAjaxのレスポンスとバックスキームの原因に対処するための履歴記録管理
• クロスドメイン通信

IFRAMEの医療過誤

• ページの読み込みをブロック

IFRAME内の取得ウィンドウ

子ウィンドウを取得します。

1. document.getElementsByTagName（ 'IFRAME'）[0] .contentWindow
2. document.getElementById（ 'ID'）[0] .contentWindow
3. window.frames [ 'のiframe的名']

親ウィンドウを取得します。

1. window.parent

IE固有

1. document.iframes [名前] .contentWindow
2. document.iframes [i]は.contentWindow

値

父は子供を取ります

<!--父-->
<iframe src="./children.html" frameborder="1"></iframe>
<!--获取子变量-->
<script>
    var cIframe = document.getElementsByTagName('iframe')[0];
    cIframe.onload = function () {
        console.log(cIframe.contentWindow.childrenAge);  
    };
</script>
复制代码

<!--子-->
<!--定义变量-->
<script>
    var childrenAge = 20;
</script>
复制代码

父は子供を取ります

<!--父-->
<iframe src="./children.html" frameborder="1"></iframe>
<!--定义变量-->
<script>
    var fatherAge = 50;
</script>
复制代码

<!--子-->
<!--获取变量-->
<script>
   var fIframe = window.parent;
   console.log(fIframe.fatherAge);
</script>
复制代码

父と息子ページウィンドウとの関係

• window.self - 自分
• window.parent - 親ウィンドウオブジェクト
• window.top - トップレベルのウィンドウオブジェクト

判決はiframeロードされました

非onloadイベントでIEを使用して

 iframe(dom元素).onload = function () {}
复制代码

IEのonreadystatechangeにを使用して

iframe.onreadystatechange = function () {
    if (iframe.readyState === 'complete' || iframe.readyState === 'loaded') {
        alert('Local iframe is now loaded');
    }
}
复制代码

息子ウィンドウクロスドメイン通信

ハッシュ

<!--origin http协议--> 
<iframe src="./iframe2.html" frameborder="1"></iframe>
<script>
    var oIframe = document.getElementsByTagName('iframe')[0];
    var oIframeSrc = oIframe.src;
    var age = 55;
    document.onclick = function () {
        oIframe.src = oIframeSrc + '#' + age;
        age++;
    };
</script>
复制代码

<!--target file协议-->
<div>iframe2222</div>
<script>
    var lct = window.location;
    var preHash = lct.hash;

    setInterval(function () {
        if (preHash !== lct.hash) {
            console.log(lct.hash);
            preHash = lct.hash;
        }
    }, 300);
    </script>
复制代码

ターゲットページの結果を確認するために元のページのクリックイベントをトリガ

• 短所：
  • ターゲットページ、タイマーは、ハッシュ値の変化を見るために続けて使用する消費のパフォーマンスを必要とします
  • 元のページには、データ・ターゲット・ページを取得することはできません
  • ハッシュへの安全でないデータ
  • サイズは限られています

window.name

これは、2つのページがブリッジとして機能クロスドメインページの一時的な手段であるべき

<!--target http协议--> 
<iframe src="./iframe2.html" frameborder="1"></iframe>
<script>
    var oIframe = document.getElementsByTagName('iframe')[0];
    var flag = true;
    oIframe.onload = function () {
        if (flag) {
            oIframe.src = './temp.html';
            flag = false;
        } else {
            console.log(oIframe.contentWindow.name);
        }
    };
</script>
复制代码

<!--tmep-->
空
复制代码

<!--orgin file协议-->
<div>iframe2222</div>
<script>
    window.name = 20;
</script>
复制代码

• 短所：
  • ハッシュへの安全でないデータ
  • サイズは限られています

ます。https：//juejin.im/post/5d05f1326fb9a07ee9586ec9で再現