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 > </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同域，所以可以訪問節點
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" ></iframe>
這個項目就是這樣了，好像用文字表達不了什么，或者概括不了什么重點。看代碼吧。
付上一個跨越原理的連接
http://www.chinaz.com/web/2011/1123/222158.shtml
網站標題：iframe跨域自適應高度
當前網址：http://m.newbst.com/article24/gsosje.html
成都網站建設公司_創新互聯，為您提供標簽優化、商城網站、網站營銷、網站設計、企業建站、網頁設計公司
聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯
- 企業建站租用服務器應該考慮的兩個因素 2022-10-05
- 小企業建站的三不要 2021-12-17
- 中小企業建站的作用有哪些？ 2016-04-11
- 中小企業建站需滿足的功能有哪些？ 2022-05-16
- 商業企業建站的一些基本常識。 2016-11-02
- 網站在企業公司中所起的作用 2016-08-10
- 企業建站如何防止被騙 2021-05-02
- 企業建站有怎樣一個詳細的策劃，來分享下 2016-10-06
- 做好品牌網站建設企業建站策劃方案很重要 2020-11-26
- 福州企業建站中容易被忽視的三大問題 2016-05-19
- 企業建站需要注意的一個基本的原則 2013-06-29
- 專業網站設計制作怎么找？企業建站哪家好？ 2020-12-19