iframe跨域自适应高度

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跨域自适应高度
当前网址：https://www.cdcxhl.com/article24/gsosje.html

成都网站建设公司_创新互联，为您提供标签优化、商城网站、网站营销、网站设计、企业建站、网页设计公司

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

猜你还喜欢下面的内容

小程序开发

企业建站知识

同城分类信息