基础引导

通过 HTMLIFrameElement.contentWindow 获取数据

contentWindow

  • 属性返回当前 HTMLIFrameElement 的 Window 对象
    你可以使用这个 Window 对象去访问这个 iframe 的文档和它内部的 DOM.
    这个是可读属性, 但是它的属性像全局Window 一样是可以操作的

    window 共享性

    window 是具有共享性的，在同一个窗口不同的页面是可以共享的 ，而且可以随意的读写。

    跨域实现方法

  1. 先让 iframe 中的页面程序保存 window.name

  2. 然后跳转与父级别窗口同源的另一个页面

    • 父级页面可以从当前的 iframe 拿到该页面的 window.name

      特点

  3. 每个浏览器窗口都有一个全局变量 window（包含 iframe 的 contentWindow）

  4. 每个 window 对象都有一个 name 属性

    注意：一个窗口只有一个 name 属性

  5. 该窗口被关闭前，所有页面共享一个 name 属性并拥有读写权限

  6. 无论该窗口在被关闭前，载入什么页面，都不会改变 name 值
  7. 存储约为 2Mb 字符串
  8. 如果父级窗口地址源和 iframe 地址源不同，父级无法通过 iframe.contentWindow.name 获取值，但 iframe内部不受该规则限

47.png
index1.html

  1. <body>
  2.   <script>
  3.     var flag = false;
  4.     var iframe = document.createElement('iframe');
  5.     var getDatas = function(){
  6.       if(flag){
  7.         var data = iframe.contentWindow.name;
  8.       }else{
  9.         flag = true;
  10.         setTimeout(function(){
  11.           iframe.contentWindow.loaction ='index2.html'; // 执行完后 就刷新再从头执行了，此代码块执行两次
  12.         },500)
  13.       }
  14.     }
  15.     iframe.src = 'http://other-origin.com/index3.html'; 
  16.     if(iframe.attachEvent){
  17.       iframe.attachEvent('onload',getDatas);
  18.     }else{
  19.       iframe.onload = getDatas;
  20.     }
  21.     document.body.appendChild(iframe);
  22.   </script>
  23. </body>

index2.html
与 index1.html 同源
内容是一个空的 html
目的为子集不受影响所以可以获得 window.name

index3.html
与 index1.html 不同源，与获取数据目标同源

  1. <body>
  2.   <script>
  3.     $.ajax{'./data.json', function(){
  4.       window.name = JSON.stringify(data);
  5.     }}
  6.   </script>
  7. </body>

缺点

非常地绕，且要有与服务端同源的 html 才能实现。