Fork me on GitHub
代码改变世界

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

2016-01-09 12:02  autrol  阅读(4105)  评论(0编辑  收藏  举报

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

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

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

利用postMessage方法传值

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

demo:

/*主页面发送消息,子页面接收消息的情况*/
//主页面发送消息
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");
     }
});

/*子页面发送消息,主页面接收消息的情况*/
//子页面发送消息
parent.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");
    }
});

注意:

  1. postMessage()的第一个参数最早是作为“永远都是字符串”来实现的。但后来这个参数的定义改了,改成允许传入任何数据结构。可是,并非所有浏览器都实现了这一变化。为保险起见,使用postMessage()时,最好还是只传字符串。如果你想传入结构化的数据,最佳选择是先在要传入的数据上调用JSON.stringify(),通过postMessage()传入得到的字符串,然后再在onmessage事件处理程序中调用JSON.parse()。
  2. e.source大多数情况下只是window对象的代理,并非实际的window对象。换句话说,不能通过这个代理对象访问window对象的其他任何信息。
  3. 使用postMessage可能存在兼容性的问题

DOM操作传值

iframe有contentWindow属性,通过contentWindow属性可以对iframe里面的DOM进行操作实现信息交互。还有几个特殊的属性top(最顶层框架)、parent(父级框架)、self(window自身)。

demo:

//子页面操作父页面
top.document.getElementById("mainElement").remove();
//父页面操作子页面
document.getElementById("subFrame").contentWindow.document.getElementById("subElement");
//子页面一操作子页面二
top.document.getElementById("subFrame2").contentWindow.document.getElementById("subElement2");
//子页面二操作子页面一
top.document.getElementById("subFrame1").contentWindow.document.getElementById("subElement1");

URL方式传值

通过在URL上添加数据,然后解析URL,得到相应数据;不过这种方式只能是子页面在加载时,父页面向子页面传输信息。

注意:在URL上添加一些特殊参数时,记得使用encodeURIComponent方法对其进行编码

利用全局属性传值

直接在top、parent等全局变量中添加属性,然后无论是哪个框架都可以通过全局性的属性,取到其值

文件的共用性

主页面与子页面、子页面与子页面之间的JS、CSS文件都是不能通用的,也就是不同框架的JS、CSS在未做特殊处理的情况下,不能相互使用。