解决跨域iframe自适应高度

最新推荐文章于 2020-11-28 15:13:05 发布

billfeller

最新推荐文章于 2020-11-28 15:13:05 发布

阅读量969

点赞数

分类专栏： html+css js 文章标签： iframe function timer null url 框架

js 同时被 2 个专栏收录

162 篇文章 0 订阅

订阅专栏

html+css

45 篇文章 0 订阅

订阅专栏

关于iframe自适应高度的讨论可以先看看口碑UED的博客 http://ued.koubei.com/?p=1217

大概原理见下图:

可以直接看示例：http://lzlu.com/lab/loader/

下面直接上代码了
下面是核心代码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一定要与最面的页面是同域的。

billfeller

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
解决跨域iframe自适应高度

关于iframe自适应高度的讨论可以先看看口碑UED的博客 http://ued.koubei.com/?p=1217大概原理见下图:可以直接看示例：http://lzlu.com/lab/loader/下面直接上代码了下面是核心代码loader.js/** * 跨域iframe自适应高度解决方案 * Author: changyin@tao
复制链接

扫一扫