IE8下IFrame 和子页面的通信
Posted 一苇渡江q
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了IE8下IFrame 和子页面的通信相关的知识，希望对你有一定的参考价值。
业务中遇到这种场景，我们的业务嵌入别的系统中使用，系统采用Iframe调用我们的业务，在使用过程中主要遇到两个问题：
1。子页面高度发生变化时外部的Iframe高度自适应的问题。
2。子页面不同获取外部scrollTop的问题。
这两个问题其实都可以说是跨域通信的问题。
这两个问题我们采用了不同不同的方案来解决。
1。子页面高度发生变化时外部的Iframe高度自适应的问题。
我们采用在外部系统中增加一个代理页面，这样的话这个代理页面就和外部系统处于同一个域中了，相当于我们在外部系统中安插了一个内鬼，使用这个代理页面来调整外部Iframe的高度。
代码实现
window.setInterval("proxyHeight()", 400);//每隔400毫秒监听下页面高度（其实就是我们子页面的高度）
var pageHeightPre = 0;
function proxyHeight() {
var proxyUrl = Rose.browser.getParameter(‘proxyUrl‘);//获取代理页面的URL
if (proxyUrl != null){
var height = document.documentElement.scrollHeight;
if(Rose.browser.ie){
height = document.body.scrollHeight;
}
if(height <= 0) {
return;
}
if (height < 450) {
height = 450;
}
if(height != 0 && pageHeightPre != height){
pageHeightPre = height;
document.getElementById(‘proxyFarme‘).src= proxyUrl +‘?proxyHeight=‘+height;
}
}
}
代理页面的代码大致是这样的
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="./js/common/Rose/1.0.0/Rose.src.js"></script> </head> <body> </body> </html> <script type="text/javascript" > window.onload = function(){ var proxyHeight = Rose.browser.getParameter(‘proxyHeight‘); if(proxyHeight != null){ parent.parent.reinitIframe(proxyHeight);//调用系统的reinitIframe方法
} } </script>
reinitIframe方法的逻辑较简单
function reinitIframe(height) { var iframe = $(".ui-navtab-iframe:visible").find("iframe"); $(iframe).height(height); }
这种方式也能满足我们业务需要。
2。子页面不同获取外部scrollTop的问题，这个问题我们采用postMessage的方式。
在外部系统中我们监听滚动条的事件
$(window).scroll(function(event){ var iframe = $(".ui-navtab-iframe:visible").find("iframe"); if(iframe.length == 0){ return; } var scrollHeight = $(document).scrollTop() scrollHeight = JSON.stringify({‘scrollHeight‘: scrollHeight}); iframe[0].contentWindow.postMessage(scrollHeight, "*"); });
在子业务中接受消息
function receiveMessage(e){ if (e != null && e != undefined && e.data != undefined ){ if(typeof(e.data) == "string"){ try{ var data = JSON.parse(e.data); if(data.scrollHeight != null && data.scrollHeight != undefined){ window.iframScrollHeight = data.scrollHeight; } }catch(e){ } } } } attachEventListener("message",receiveMessage); function attachEventListener(type, listener){ if(window.addEventListener){ // 兼容所有浏览器除了ie9以下 window.addEventListener(type, listener, false); }else if(window.attachEvent){ // 兼容ie9以下浏览器 window.attachEvent("on"+type, listener); } }
这样的话只要外部的滚动条有变化就会发送滚动条目前高度的消息，子页面接收到消息后 就能获取到外部的滚动条的高度了，也能满足业务需要。
美中不足的是目前的写法是实时监听，不过也可以修改为子页面发送消息给外部Iframe ，使之获取滚动条的高度后在发消息给子页面。各有优劣吧。
以上是关于IE8下IFrame 和子页面的通信的主要内容，如果未能解决你的问题，请参考以下文章
使用iframe父页面调用子页面和子页面调用父页面的元素与方法
各位大侠我想问一下 iframeresizer.js 父页面和子页面怎么互调方法？（跨域）