iframe内联框架之巧妙跨域

栏目: Html · 发布时间: 5年前

内容简介:触发origin页面点击事件,查看target页面的执行结果这里需要借助一个临时页面充当两个跨域页面的桥梁
  • 可以将一个网页嵌入另一个网页
    • 导航tab栏、在线编辑、广告植入等
  • 历史记录管理,解决ajax导致的网站响应浏览器前进后退的方案
  • 跨域通信等

iframe弊端

  • 阻塞页面加载

获取iframe内的window

获取子窗口

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

获取父窗口

  1. window.parent

IE专用

  1. document.iframes[name].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加载完成

非IE下使用onload

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

IE下使用onreadystatechange

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

父子窗口跨域通信

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

触发origin页面点击事件,查看target页面的执行结果

iframe内联框架之巧妙跨域
  • 缺点:
    • target页需要使用计时器不断查看hash值变化, 性能消耗大
    • origin页面不能获取到target页面的数据
    • 数据放入hash中不安全
    • 大小受到限制

window.name

这里需要借助一个临时页面充当两个跨域页面的桥梁

<!--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>
复制代码
iframe内联框架之巧妙跨域
  • 缺点:
    • 数据放入hash中不安全
    • 大小受到限制

以上所述就是小编给大家介绍的《iframe内联框架之巧妙跨域》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

群体性孤独

群体性孤独

[美] 雪莉·特克尔 / 周逵、刘菁荆 / 浙江人民出版社 / 2014-3-1 / CNY 66.90

[内容简介] ☆ 你是否也熟悉这样的场景:家人在一起,不是交心,而是各自看电脑和手机;朋友聚会,不是叙旧,而是拼命刷新微博、微信;课堂上,老师在讲,学生在网上聊天;会议中,别人在报告,听众在收发信息。所有这些现象都可以归结为“群体性孤独”——我们似乎在一起,但实际上活在自己的“气泡”中。我们期待他人少,期待技术多。不间断的联系,是否让人类陷入了更深的孤独? ☆ 麻省理工学院社会学教授雪......一起来看看 《群体性孤独》 这本书的介绍吧!

JSON 在线解析
JSON 在线解析

在线 JSON 格式化工具

RGB转16进制工具
RGB转16进制工具

RGB HEX 互转工具

Base64 编码/解码
Base64 编码/解码

Base64 编码/解码