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

主页面、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在未做特殊处理的情况下，不能相互使用。