javascript中IFrame跨域高度自适应实现代码
同域时Iframe高度自适应
下面的代码兼容IE/Firefox浏览器，控制id为“iframeid”的iframe的高度，通过JavaScript取得被嵌套页面最终高度，然后在主页面进行设置来实现。
另外，请注意此解决方案仅供同域名下使用。
| 代码如下 | 复制代码 |
|
<script type="text/javascript">
|
|
跨域时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">
|
|
iframe嵌套页面iframe.html
| 代码如下 | 复制代码 |
|
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
|
iframe中介页面agent.html
| 代码如下 | 复制代码 |
|
</html> |
|
UPDATE：长期以来一直有网友说方案不能跨域，今天我重新又测试了下，确定在IE6、IE7、IE8、IE9、Firefox全系列、Chrome全系列均可以成功跨域控制高度。请注意以下要点
第一，修改main.html文件中iframe的src地址为需要跨域的域名（比如ccvita.sinaapp.com）
第二，修改iframe.html文件中的urlC值为源域名（比如www.ccvita.com）这点最重要
解决跨域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();}); } };
|
|
————————-
代理文件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> | |
补充：网页制作,js教程 
