iframe 跨域自適應(yīng)高度

之前的一個項(xiàng)目，點(diǎn)擊不同的菜單按鈕，IFrame合作網(wǎng)站的不同頁面。面臨的最大問題就是跨域IFRAME只適應(yīng)高度的問題。我總結(jié)下的方法：

比如：www.a.com是我們的網(wǎng)站，www.b.com是合作方法的網(wǎng)站 。

在www.a.com應(yīng)該做的就是兩個頁面，一個是www.a.com/index.php就是圖上的展示頁面。一個是www.a.com/agency.php這個就中介頁面。兩個頁面是同級目錄。

先說index.php吧

HTML結(jié)構(gòu)：這里是為了每點(diǎn)擊一次，就iframe加載一次。所以Html上我修改成這樣了。IFRAEM 的src 為空都是為了每次點(diǎn)擊重新加載，獲取高度。

<ul class="condimenu2" id="condiMenu">
            <li class="on" id="menu"><span></span>新聞</li>
            <li><span></span>預(yù)測</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 >			</span>.......
<span >		</span></ul>
<span >	</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同域，所以可以訪問節(jié)點(diǎn)
    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>

合作方的代碼：

//預(yù)測
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" ></iframe>

這個項(xiàng)目就是這樣了，好像用文字表達(dá)不了什么，或者概括不了什么重點(diǎn)?？创a吧。

付上一個跨越原理的連接

http://www.chinaz.com/web/2011/1123/222158.shtml