postMessage iframe跨域解决高度自适应的解决方法有哪些?

2018-09-26 18:15:00 3450 3 编辑:深正互联 来源:互联网

今天学习一个新的window方法:window.postMessage。window.postMessage() 方法可以安全地实现跨源通信。

postMessage是html5引入的API,postMessage()方法允许来自不同源的脚本采用异步方式进行有效的通信,可以实现跨文本文档,多窗口,跨域消息传递.多用于窗口间数据通信,这也使它成为跨域通信的一种有效的解决方案.                                

跨域解决高度自适应

之前的一篇iframe高度自适应的文章想必很多人看过,在同源中,处理比较方便,但是对于不同源的iframe处理起来就比较麻烦,需要用到代理页面。而postMessage则直接两个页面交流。

属性详解

postMessage

otherWindow.postMessage(message, targetOrigin, [transfer])

otherWindow

窗口的一个引用,比如iframe的contentWindow属性,执行window.open返回的窗口对象,或者是命名过的或数值索引的window.frames.

message

要发送到其他窗口的数据,它将会被[!结构化克隆算法]

(https://developer.mozilla.org/en-US/docs/DOM/The_structured_clone_algorithm)

序列化.这意味着你可以不受什么限制的将数据对象安全的传送给目标窗口而无需自己序列化.

targetOrigin

通过窗口的origin属性来指定哪些窗口能接收到消息事件,指定后只有对应origin下的窗口才可以接收到消息,设置为通配符"*"表示可以发送到任何窗口,但通常处于安全性考虑不建议这么做.如果想要发送到与当前窗口同源的窗口,可设置为"/"

transfer | 可选属性

是一串和message同时传递的**Transferable**对象,这些对象的所有权将被转移给消息的接收方,而发送一方将不再保有所有权.

Message事件

window.addEventListener("message", receiveMessage, false) ;

function receiveMessage(event) {

var origin= event.origin;

console.log(event);

}

data 包含任意字符串数据,由原始脚本发送

origin 一个字符串,包含原始文档的方案、域名以及端口(如:http://domain.example:80)

lastEventId 一个字符串,包含了当前的消息事件的唯一标识符。

source 原始文件的窗口的引用。更确切地说,它是一个WindowProxy对象。

ports 一个数组,包含任何MessagePort对象发送消息。

iframe高度自适应

<body>

<h1>父页面</h1>

<iframe src="http://www.szhulian.com/files/childMessage.html" id='myframe' name="myframe" allowTransparency=

"true" scrolling="no" width="100%" height="100%" frameborder="0"></iframe>

<script>

var p = document.getElementById('myframe');

window.postMessage && (window.attachEvent ? window.attachEvent("onmessage",

function(a) {

if (0 === parseInt(a.data, 10)) p.height = "100%",

document.getElementById("myframe").contentWindow.postMessage("getHeight", "*");

else if (a.data.toString().indexOf("px") > 0) {

var b = parseInt(a.data, 10);

isNaN(b) || (p.height = b + "px")

}

}) : window.addEventListener("message",

function(a) {

if (0 === parseInt(a.data, 10)) p.height = "100%",

document.getElementById("myframe").contentWindow.postMessage("getHeight", "*");

else if (a.data.toString().indexOf("px") > 0) {

var b = parseInt(a.data, 10);

isNaN(b) || (p.height = b + "px")

}

},

!1));

</script>

</body>

<body>

<h1>子页面</h1>

<script type="text/javascript">

function calcPageHeight (doc) {

varsHeight = Math.max(doc.body.scrollHeight, doc.documentElement.scrollHeight);

return sHeight.toString();

};

calcPageHeight(document);


window.onload = function () {

if (top && top.location !== self.location) {

if ((navigator.appName === 'Microsoft Internet Explorer' && navigator.appVersion .split(';')[1].replace(/[ ]/g, '') === 'MSIE7.0') ||

(navigator.appName === 'Microsoft Internet Explorer' && navigator.appVersion .split(';')[1].replace(/[ ]/g, '') === 

'MSIE6.0')) {

if (top.name) {

top.name = calcPageHeight(document);

}

}

else {

if (top.postMessage) {

window.attachEvent ? window.attachEvent('onmessage', function (event) {

top.postMessage(calcPageHeight(document) + 'px', '*');

}) : window.addEventListener('message', function (event) {

top.postMessage(calcPageHeight(document) + 'px', '*');

}, false);

top.postMessage(0, '*');

}

else if (top.name) {

top.name = calcPageHeight(document);

}

}

}

};

</script>

</body>

本站文章均为深正网站建设摘自权威资料,书籍,或网络原创文章,如有版权纠纷或者违规问题,请即刻联系我们删除,我们欢迎您分享,引用和转载,但谢绝直接搬砖和抄袭!感谢...
关注深正互联

15

技术从业经验

多一份方案,会有收获...

联系深正互联,免费获得专属《策划方案》及报价

在线咨询
微信交谈
拒绝骚扰,我们只想为给您带来一些惊喜...
多一份免费策划方案,总有益处。

请直接添加技术总监微信联系咨询

深正互联微信
扫描即可沟通