Clever cross-domain linking frame within iframe

Author zhangl

What is the iframe

• iframe html tag is a dom element

effect

• A web page may be embedded in another page
  • Navigation tab bar, online editing, product placement, etc.
• History records management to address the cause of the site ajax response to the browser forward and back scheme
• Cross-domain communication

iframe malpractice

• Blocking page loading

Acquisition window within an iframe

Get the child window

1. document.getElementsByTagName('iframe')[0].contentWindow
2. document.getElementById('id')[0].contentWindow
3. window.frames['iframe的name']

Get the parent window

1. window.parent

IE-specific

1. document.iframes[name].contentWindow
2. document.iframes[i].contentWindow

The value

Father takes child

<!--父-->
<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>
复制代码

Father takes child

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

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

The relationship between father and son page window

• window.self - yourself
• window.parent - parent window object
• window.top - top-level window object

Judgment iframe loaded

Using IE in non onload

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

Using the IE onreadystatechange

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

Sons window cross-domain communication

hash

<!--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>
复制代码

Trigger origin page click event to see the results of the target page

• Disadvantages:
  • target page need to use the timer continues to view the hash value changes, the performance of consumption
  • origin page can not obtain the data target page
  • Unsafe data into a hash
  • Size is limited

window.name

It should be a temporary means of cross-domain page two pages act as a bridge

<!--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>
复制代码

• Disadvantages:
  • Unsafe data into a hash
  • Size is limited

Reproduced in: https: //juejin.im/post/5d05f1326fb9a07ee9586ec9