iframe 跨域自适应高度
之前的一个项目，点击不同的菜单按钮，IFrame合作网站的不同页面。面临的最大问题就是跨域IFRAME只适应高度的问题。我总结下的方法：
比如：www.a.com是我们的网站，www.b.com是合作方法的网站 。
在www.a.com应该做的就是两个页面，一个是www.a.com/index.php就是图上的展示页面。一个是www.a.com/agency.php这个就中介页面。两个页面是同级目录。
先说index.php吧
HTML结构：这里是为了每点击一次，就iframe加载一次。所以Html上我修改成这样了。IFRAEM 的src 为空都是为了每次点击重新加载，获取高度。
<ul class="condimenu2" id="condiMenu"> <li class="on" id="menu"><span></span>新闻</li> <li><span></span>预测</li> <li><span></span>诊断</li> <li><span></span>资料</li> <li>公告</li> </ul> <div class="condibar" id="condiBar"> <div class="condikey2 normal on" id="news"> <ul class="TitleSum"> <span style="white-space:pre"> </span>....... <span style="white-space:pre"> </span></ul> <span style="white-space:pre"> </span> </div><pre id="line1"><<span class="start-tag">div</span> <span class="attribute-name">class</span>="<a target=_blank class="attribute-value">condikey2 normal</a>"> <span id="line277"></span> <<span class="start-tag">iframe</span> <span class="attribute-name">id</span>="<a target=_blank class="attribute-value">picks</a>" <span class="attribute-name">name</span>="<a target=_blank class="attribute-value">picks</a>" <span class="attribute-name">src</span>="<a target=_blank href="view-source:http://3g.21so.com/result.php" class="attribute-value"></a>" <span class="attribute-name">width</span>="<a target=_blank class="attribute-value">100%</a>" <span class="attribute-name">height</span>="<a target=_blank class="attribute-value">auto</a>" <span class="attribute-name">scrolling</span>="<a target=_blank class="attribute-value">no</a>" <span class="attribute-name">frameborder</span>="<a target=_blank class="attribute-value">0</a>"></<span class="end-tag">iframe</span>> <span id="line278"></span> </<span class="end-tag">div</span>> <span id="line279"></span> <<span class="start-tag">div</span> <span class="attribute-name">class</span>="<a target=_blank class="attribute-value">condikey2 normal</a>"> <span id="line280"></span> <<span class="start-tag">iframe</span> <span class="attribute-name">id</span>="<a target=_blank class="attribute-value">research</a>" <span class="attribute-name">name</span>="<a target=_blank class="attribute-value">research</a>" <span class="attribute-name">src</span>="<a target=_blank href="view-source:http://3g.21so.com/result.php" class="attribute-value"></a>" <span class="attribute-name">width</span>="<a target=_blank class="attribute-value">100%</a>" <span class="attribute-name">height</span>="<a target=_blank class="attribute-value">auto</a>" <span class="attribute-name">scrolling</span>="<a target=_blank class="attribute-value">no</a>" <span class="attribute-name">frameborder</span>="<a target=_blank class="attribute-value">0</a>"></<span class="end-tag">iframe</span>> <span id="line281"></span> </<span class="end-tag">div</span>> <span id="line282"></span> <<span class="start-tag">div</span> <span class="attribute-name">class</span>="<a target=_blank class="attribute-value">condikey2 normal</a>"> <span id="line283"></span> <<span class="start-tag">iframe</span> <span class="attribute-name">id</span>="<a target=_blank class="attribute-value">information</a>" <span class="attribute-name">name</span>="<a target=_blank class="attribute-value">information</a>" <span class="attribute-name">src</span>="<a target=_blank href="view-source:http://3g.21so.com/result.php" class="attribute-value"></a>" <span class="attribute-name">width</span>="<a target=_blank class="attribute-value">100%</a>" <span class="attribute-name">height</span>="<a target=_blank class="attribute-value">auto</a>" <span class="attribute-name">scrolling</span>="<a target=_blank class="attribute-value">no</a>" <span class="attribute-name">frameborder</span>="<a target=_blank class="attribute-value">0</a>"></<span class="end-tag">iframe</span>> <span id="line284"></span> </<span class="end-tag">div</span>> <span id="line285"></span> <<span class="start-tag">div</span> <span class="attribute-name">class</span>="<a target=_blank class="attribute-value">condikey2 normal</a>"> <span id="line286"></span> <<span class="start-tag">iframe</span> <span class="attribute-name">id</span>="<a target=_blank class="attribute-value">notice</a>" <span class="attribute-name">name</span>="<a target=_blank class="attribute-value">notice</a>" <span class="attribute-name">src</span>="<a target=_blank href="view-source:http://3g.21so.com/result.php" class="attribute-value"></a>" <span class="attribute-name">width</span>="<a target=_blank class="attribute-value">100%</a>" <span class="attribute-name">height</span>="<a target=_blank class="attribute-value">auto</a>" <span class="attribute-name">scrolling</span>="<a target=_blank class="attribute-value">no</a>" <span class="attribute-name">frameborder</span>="<a target=_blank class="attribute-value">0</a>"></<span class="end-tag">iframe</span>> <span id="line287"></span> </<span class="end-tag">div</span>>
/div>
再附上JS:
<script type="text/javascript">
function getCookie(name)
{
var arr = document.cookie.match(new RegExp("(^| )" + name + "=([^;]*)(;|$)"));
if (arr != null) return unescape(arr[2]); return null;
}
$(function(){
$('#condiMenu li').click(function(){
var index = $(this).index();
var iframeUrl = new Array('','http://s.caiku.com/coop/21so/stock/<?php echo $vim_code; ?>/picks','http://s.caiku.com/coop/21so/stock/<?php echo $vim_code; ?>/research','http://s.caiku.com/coop/21so/stock/<?php echo $vim_code; ?>/information','http://s.caiku.com/coop/21so/stock/<?php echo $vim_code; ?>/notice');
var iframeName = new Array('','picks','research','information','notice');
$(this).addClass('on').siblings().removeClass('on');
$('#condiBar .condikey2').eq(index).addClass('on').siblings().removeClass('on');
$('#'+iframeName[index]).attr('src',iframeUrl[index]);
if(getCookie(iframeName[index]))
{
var height = getCookie(iframeName[index]);
height = height.split("#")[1]+"px";
$('#'+iframeName[index]).css('height',height);
}
});
})
</script>
加cookie是之前做的时候不知道为什么在切换之间不能重新读取第一次的高度，所以这里要加上高度了。
agency.php
<script type="text/javascript">
function setCookie(name,value) //一个是cookie的名字，一个是值
{
var Days = 1; //此 cookie 将被保存30天
var exp = new Date();
exp.setTime(exp.getTime() + Days*24*60*60*1000);
document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString();
}
function getCookie(name)
{
var arr = document.cookie.match(new RegExp("(^| )" + name + "=([^;]*)(;|$)"));
if (arr != null) return unescape(arr[2]); return null;
}
function delCookie(name)//删除cookie
{
var exp = new Date();
exp.setTime(exp.getTime() - 1);
var cval=getCookie(name);
if(cval!=null) document.cookie= name + "="+cval+";expires="+exp.toGMTString();
}
function pseth() {
//获取由合作方带来的iframe值
var parms = window.location.search;
var pos = parms.indexOf('=');
var iframeid_name = parms.substring(pos+1).toString();
var num = iframeid_name.indexOf('&');
var iframeid = iframeid_name.slice(0,num);
var iObj = parent.parent.document.getElementById(iframeid);//A和main同域，所以可以访问节点
iObjH = parent.parent.frames[iframeid].frames["iframeA"].location.hash;//访问自己的location对象获取hash值
//alert(iObjH);
iObj.style.height = iObjH.split("#")[1]+"px";//操作dom
if(getCookie(iframeid)==null && iObjH!='#0')
{
setCookie(iframeid,iObjH);
}
//delCookie(iframeid);
}
pseth();
</script>
合作方的代码：
//预测
var iframe = "picks"; //不同的IFRAME就用不同的名称
function iframeSethash(){
hashH = $(document).height();
urlC = "http://3g.21so.com/agency.php?iframe="+ iframe +"&t="+ Math.random();
var iframeA = document.getElementById("iframeA");
if (iframeA){
iframeA.src = urlC + "#" + hashH;
}
}
<iframe id="iframeA" name="iframeA" src="" widh="100" height="100" style="display:none;"></iframe>
这个项目就是这样了，好像用文字表达不了什么，或者概括不了什么重点。看代码吧。
付上一个跨越原理的连接
http://www.chinaz.com/web/2011/1123/222158.shtml