首页 > 其他 > 详细

主页面、iframe之间调用以及传值

时间:2016-01-09 12:33:23      阅读:260      评论:0      收藏:0      [点我收藏+]

主页面、iframe之间的调用和传值,无非就是两个交互形式:

  1. 主页面与子页面的交互
  2. 子页面之间的交互

接下来要讲的是四种交互传值的方式:利用postMessage方法传值、DOM操作传值、URL方式传值、利用全局属性传值

利用postMessage方法传值

这种方式非常像事件绑定、监听。postMessage方法接收两个参数:一条消息、一个表示消息接收方来自哪个域的字符串。第二个参数对保障安全通信非常重要,可以防止浏览器把消息发送到不安全的地方。

下面是应用实例:

//主页面发送消息
var myFrame = document.getElementById("myFrame");//获取框架
myFrame.contentWindow.postMessage("message", "http://crm.piao.qunar.com:8080");

//子页面接收消息,并且做出回应
window.addEventListener(‘message‘, function(e){
     if(e.origin == "http://crm.piao.qunar.com:8080") {
        console.log(e.data);//可以对数据进行处理
        e.source.postMessage("确认收到消息", "http://crm.piao.qunar.com:8080");
     }
});

 

主页面、iframe之间调用以及传值

原文:http://www.cnblogs.com/yangzhinian/p/4925734.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!