A-A+

javascript中IFrame跨域高度自适应实现代码

2016年01月18日前端设计暂无评论阅读 5 views 次

下面详细介绍了IFrame跨域高度自适应解决办法，主要是讲述了同域和跨域的js处理方法。

同域时Iframe高度自适应

下面的代码兼容IE/Firefox浏览器，控制id为“iframeid”的iframe的高度，通过JavaScript取得被嵌套页面最终高度，然后在主页面进行设置来实现。

另外,请注意此解决方案仅供同域名下使用,代码如下:

<script type="text/javascript">
function SetCwinHeight(){
var iframeid=document.getElementById("iframeid"); //iframe id
if (document.getElementById){
if (iframeid && !window.opera){
if (iframeid.contentDocument && iframeid.contentDocument.body.offsetHeight){
iframeid.height = iframeid.contentDocument.body.offsetHeight;
}else if(iframeid.Document && iframeid.Document.body.scrollHeight){
iframeid.height = iframeid.Document.body.scrollHeight; }} } }
</script>
<iframe width="100%" id="iframeid" onload="Javascript:SetCwinHeight()" height="1" frameborder="0" src="kimi.php"></iframe>

跨域时Iframe高度自适应

在主页面和被嵌套的iframe为不同域名的时候，就稍微麻烦一些，需要避开JavaScript的跨域限制。

原理:现有iframe主页面main.html、被iframe嵌套页面iframe.html、iframe中介页面agent.html三个，通过main.html（域名为http://www.ccvita.com）嵌套iframe.html（域名为：http://www.phpq.net），当用户浏览时执行iframe.html中的JavaScript代码设置iframeC的scr地址中加入iframe页面的高度，agent.html（域名为：http://www.ccvita.com）取得传递的高度，通过JavaScript设置main.html中iframe的高度。最终实现预期的目标。
iframe主页面main.html,代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>iframe主页面</title></head>
<body>
<div style="border:1px solid #ccc;padding:10px;"><iframe id="frame_content" name="frame_content" src="iframe.html" width="100%" height="0" scrolling="no" frameborder="0"></iframe></div><br />尾部<br /></body>
</html>

iframe嵌套页面iframe.html,代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>被iframe嵌套页面</title></head>
<body>
文字<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />文字<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />文字<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />文字<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><iframe id="iframeC" name="iframeC" src="" width="0" height="0" style="display:none;" ></iframe>
<script type="text/javascript">
function sethash(){
hashH = document.documentElement.scrollHeight;
urlC = "agent.html";
document.getElementById("iframeC").src=urlC+"#"+hashH;
}
window.onload=sethash;
</script>
</body>
</html>

iframe中介页面agent.html,代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>iframe中介页面</title></head>
<body>
<script>
function pseth() {
var iObj = parent.parent.document.getElementById('frame_content');
iObjH = parent.parent.frames["frame_content"].frames["iframeC"].location.hash;
iObj.style.height = iObjH.split("#")[1]+"px";
}
pseth();
</script>
</body>
</html>

UPDATE:长期以来一直有网友说方案不能跨域，今天我重新又测试了下，确定在IE6、IE7、IE8、IE9、Firefox全系列、Chrome全系列均可以成功跨域控制高度。请注意以下要点

第一，修改main.html文件中iframe的src地址为需要跨域的域名（比如xiariboke.sinaapp.com）

第二，修改iframe.html文件中的urlC值为源域名（比如www.xiariboke.net.com）这点最重要

解决跨域iframe自适应高度

下面直接上代码了,下面是核心代码loader.js,代码如下:

/**
* 跨域iframe自适应高度解决方案
* Author: changyin@taobao.com <https://www.xiariboke.net>
* 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>

夏日博客

夏日博客

喜欢夏日里自由自在清爽自然的感觉,夏日工作室!

javascript中IFrame跨域高度自适应实现代码

同域时Iframe高度自适应

跨域时Iframe高度自适应

解决跨域iframe自适应高度

给我留言取消回复