這篇文章主要講解了“如何解決跨域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自適應高度問題這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
