iframe 跨域自适应高度

2025-01-11 技术教程

之前的一个项目，点击不同的菜单按钮，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 为空都是为了每次点击重新加载，获取高度。

<ulclass="condimenu2"id="condiMenu"><liclass="on"id="menu">新闻</li><li>预测</li><li>诊断</li><li>资料</li><li>公告</li></ul><divclass="condibar"id="condiBar"><divclass="condikey2normalon"id="news"><ulclass="TitleSum">.......</ul></div><preid="line1"><<spanclass="start-tag">div<spanclass="attribute-name">class="<atarget=_blankclass="attribute-value">condikey2normal</a>"><spanid="line277"><<spanclass="start-tag">iframe<spanclass="attribute-name">id="<atarget=_blankclass="attribute-value">picks</a>"<spanclass="attribute-name">name="<atarget=_blankclass="attribute-value">picks</a>"<spanclass="attribute-name">src="<atarget=_blankhref="view-source:http://3g.21so.com/result.php"class="attribute-value"></a>"<spanclass="attribute-name">width="<atarget=_blankclass="attribute-value">100%</a>"<spanclass="attribute-name">height="<atarget=_blankclass="attribute-value">auto</a>"<spanclass="attribute-name">scrolling="<atarget=_blankclass="attribute-value">no</a>"<spanclass="attribute-name">frameborder="<atarget=_blankclass="attribute-value">0</a>"></<spanclass="end-tag">iframe><spanid="line278"></<spanclass="end-tag">div><spanid="line279"><<spanclass="start-tag">div<spanclass="attribute-name">class="<atarget=_blankclass="attribute-value">condikey2normal</a>"><spanid="line280"><<spanclass="start-tag">iframe<spanclass="attribute-name">id="<atarget=_blankclass="attribute-value">research</a>"<spanclass="attribute-name">name="<atarget=_blankclass="attribute-value">research</a>"<spanclass="attribute-name">src="<atarget=_blankhref="view-source:http://3g.21so.com/result.php"class="attribute-value"></a>"<spanclass="attribute-name">width="<atarget=_blankclass="attribute-value">100%</a>"<spanclass="attribute-name">height="<atarget=_blankclass="attribute-value">auto</a>"<spanclass="attribute-name">scrolling="<atarget=_blankclass="attribute-value">no</a>"<spanclass="attribute-name">frameborder="<atarget=_blankclass="attribute-value">0</a>"></<spanclass="end-tag">iframe><spanid="line281"></<spanclass="end-tag">div><spanid="line282"><<spanclass="start-tag">div<spanclass="attribute-name">class="<atarget=_blankclass="attribute-value">condikey2normal</a>"><spanid="line283"><<spanclass="start-tag">iframe<spanclass="attribute-name">id="<atarget=_blankclass="attribute-value">information</a>"<spanclass="attribute-name">name="<atarget=_blankclass="attribute-value">information</a>"<spanclass="attribute-name">src="<atarget=_blankhref="view-source:http://3g.21so.com/result.php"class="attribute-value"></a>"<spanclass="attribute-name">width="<atarget=_blankclass="attribute-value">100%</a>"<spanclass="attribute-name">height="<atarget=_blankclass="attribute-value">auto</a>"<spanclass="attribute-name">scrolling="<atarget=_blankclass="attribute-value">no</a>"<spanclass="attribute-name">frameborder="<atarget=_blankclass="attribute-value">0</a>"></<spanclass="end-tag">iframe><spanid="line284"></<spanclass="end-tag">div><spanid="line285"><<spanclass="start-tag">div<spanclass="attribute-name">class="<atarget=_blankclass="attribute-value">condikey2normal</a>"><spanid="line286"><<spanclass="start-tag">iframe<spanclass="attribute-name">id="<atarget=_blankclass="attribute-value">notice</a>"<spanclass="attribute-name">name="<atarget=_blankclass="attribute-value">notice</a>"<spanclass="attribute-name">src="<atarget=_blankhref="view-source:http://3g.21so.com/result.php"class="attribute-value"></a>"<spanclass="attribute-name">width="<atarget=_blankclass="attribute-value">100%</a>"<spanclass="attribute-name">height="<atarget=_blankclass="attribute-value">auto</a>"<spanclass="attribute-name">scrolling="<atarget=_blankclass="attribute-value">no</a>"<spanclass="attribute-name">frameborder="<atarget=_blankclass="attribute-value">0</a>"></<spanclass="end-tag">iframe><spanid="line287"></<spanclass="end-tag">div>

/div>

再附上JS:

<scripttype="text/javascript">functiongetCookie(name){vararr=document.cookie.match(newRegExp("(^|)"+name+"=([^;]*)(;|$)"));if(arr!=null)returnunescape(arr[2]);returnnull;}$(function(){$('#condiMenuli').click(function(){varindex=$(this).index();variframeUrl=newArray('','http://s.caiku.com/coop/21so/stock/<?phpecho$vim_code;?>/picks','http://s.caiku.com/coop/21so/stock/<?phpecho$vim_code;?>/research','http://s.caiku.com/coop/21so/stock/<?phpecho$vim_code;?>/information','http://s.caiku.com/coop/21so/stock/<?phpecho$vim_code;?>/notice');variframeName=newArray('','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])){varheight=getCookie(iframeName[index]);height=height.split("#")[1]+"px";$('#'+iframeName[index]).css('height',height);}});})</script>

加cookie是之前做的时候不知道为什么在切换之间不能重新读取第一次的高度，所以这里要加上高度了。

agency.php

<scripttype="text/javascript">functionsetCookie(name,value)//一个是cookie的名字，一个是值{varDays=1;//此cookie将被保存30天varexp=newDate();exp.setTime(exp.getTime()+Days*24*60*60*1000);document.cookie=name+"="+escape(value)+";expires="+exp.toGMTString();}functiongetCookie(name){vararr=document.cookie.match(newRegExp("(^|)"+name+"=([^;]*)(;|$)"));if(arr!=null)returnunescape(arr[2]);returnnull;}functiondelCookie(name)//删除cookie{varexp=newDate();exp.setTime(exp.getTime()-1);varcval=getCookie(name);if(cval!=null)document.cookie=name+"="+cval+";expires="+exp.toGMTString();}functionpseth(){//获取由合作方带来的iframe值varparms=window.location.search;varpos=parms.indexOf('=');variframeid_name=parms.substring(pos+1).toString();varnum=iframeid_name.indexOf('&');variframeid=iframeid_name.slice(0,num);variObj=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";//操作domif(getCookie(iframeid)==null&&iObjH!='#0'){setCookie(iframeid,iObjH);}//delCookie(iframeid);}pseth();</script>

合作方的代码：

//预测variframe="picks";//不同的IFRAME就用不同的名称functioniframeSethash(){hashH=$(document).height();urlC="http://3g.21so.com/agency.php?iframe="+iframe+"&t="+Math.random();variframeA=document.getElementById("iframeA");if(iframeA){iframeA.src=urlC+"#"+hashH;}}

<iframeid="iframeA"name="iframeA"src=""widh="100"height="100"></iframe>

这个项目就是这样了，好像用文字表达不了什么，或者概括不了什么重点。看代码吧。

付上一个跨越原理的连接

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