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 为空都是为了每次点击重新加载，获取高度。

<div class="condikey2 normal"> <iframe id="picks" name="picks" src="" width="100%" height="auto" scrolling="no" frameborder="0">iframe> div> <div class="condikey2 normal"> <iframe id="research" name="research" src="" width="100%" height="auto" scrolling="no" frameborder="0">iframe> div> <div class="condikey2 normal"> <iframe id="information" name="information" src="" width="100%" height="auto" scrolling="no" frameborder="0">iframe> div> <div class="condikey2 normal"> <iframe id="notice" name="notice" src="" width="100%" height="auto" scrolling="no" frameborder="0">iframe> div>

/div>

再附上JS:


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//picks','http://s.caiku.com/coop/21so/stock//research','http://s.caiku.com/coop/21so/stock//information','http://s.caiku.com/coop/21so/stock//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);	
			}
});			   
		  })

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

agency.php




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();

合作方的代码：

//预测
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;
	}
}

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

付上一个跨越原理的连接

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

文章名称：iframe跨域自适应高度
URL链接：http://myzitong.com/article/gsosje.html

iframe跨域自适应高度

其他资讯