如何解决跨域iframe自适应高度问题

发布时间：2021-09-17 11:05:24 作者：chen
来源：亿速云阅读：174

这篇文章主要讲解了“如何解决跨域iframe自适应高度问题”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“如何解决跨域iframe自适应高度问题”吧！

下面是核心代码loader.js

/**

* 跨域iframe自适应高度解决方案

* Author: changyin@taobao.com <http://www.lzlu.com>

* Copyright (c) 2011, Taobao Inc. All rights reserved.

*/

var Loader = new function(){
var doc = document,body = doc.body,
self = this,


//获取url中的参数
getRequest = function(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)","i"),
r = window.location.search.substr(1).match(reg);
return (r!=null)? unescape(r[2]) : null;
},


//获取配置，script的优先级大于url中的参数
getConfig = function(){
var scripts = doc.getElementsByTagName('script'),
script = scripts[scripts.length - 1];
return function(param){
var p = script.getAttribute(param);
return p? p : getRequest(param);
};
}(),


//代理高度
proxyheight = 0,


//top页frame的id
frameid = getConfig("data-frameid"),


//监听实时更新高度间隔
timer = getConfig("data-timer"),


//获取代理的url
getProxyuUrl = getConfig("data-proxy"),


//创建代理的iframe
proxyframe = function(){
var el = doc.createElement("iframe");
el.style.display = "none";
el.name="proxy";
return el;
}();


//重置高度
this.resize = function(){
proxyheight = body.offsetHeight;
proxyframe.src = getProxyuUrl + "?data-frameid=" + frameid+ "&data-frameheight=" + (proxyheight+40);
}

this.init = function(){
var init = function(){
body.appendChild(proxyframe);
self.resize();

//是否update
if(!isNaN(timer)){
timer = timer<500?500:timer;
window.setInterval(function(){
if(body.offsetHeight != proxyheight){
self.resize();
}
},timer);
};
};
if(doc.addEventListener){
window.addEventListener("load",init,false);
}else{
window.attachEvent("onload",init);
}

//如果引入了JS框架,建议将上面一句改掉例如：KISSY.ready(function(){init();});
}
};

Loader.init();

————————-
代理文件proxy.html

<!DOCTYPE html><html><head><title>proxy</title><meta
http-equiv="Content-Type"
content="text/html; charset=utf-8"></head><body><script>(function() { var getRequest = function(name) { var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)","i"), r = window.location.search.substr(1).match(reg); return (r!=null)? unescape(r[2]) : null; }, height = getRequest("data-frameheight"); try { var el = window.top.document.getElementById(getRequest("data-frameid")); if (!el) return; el.style.height = height + 'px'; } catch (e) { //console.log(e); }})();</script></body></html>

————————-

使用方法：
一、在主页面要包含的iframe中引入loader.js

二、传入参数。有两种传参方法：

1.在主页面引用iframe的时候传参，将参数接在要引用的iframe的url后面
例如：<iframe id=”testframe” src=”a.html?data-frameid=testframe&data-auto=200&data-proxy=proxy.html”></iframe>

2.iframe页面包含loader.js的时候传入
例如：<script src=”loader.js” data-frameid = “testframe” data-timer = “2000″ data-proxy = “proxy.html” ></script>

如果闲麻烦直接按照示例 http://lzlu.com/lab/loader/写就行了，注意proxy.html一定要与最面的页面是同域的。

感谢各位的阅读，以上就是“如何解决跨域iframe自适应高度问题”的内容了，经过本文的学习后，相信大家对如何解决跨域iframe自适应高度问题这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是亿速云，小编将为大家推送更多相关知识点的文章，欢迎关注！

如何解决跨域iframe自适应高度问题

相关阅读