欢迎各位兄弟 发布技术文章

这里的技术是共享的

You are here

跨域iframe高度自适应 有大用

场景:

  经常会有这样的需求,跟外部合作伙伴合作,要嵌入别人的页面,这时候就需要高度自适应了,在这种跨域的情况下如何解决呢?

解决:

   在iframe(合作伙伴的页面,称为P页面)中创建一个隐藏的iframe(称为M2页面),它的src与主页面(称为M1页面)同域,当P页面载入完成,计算出此页面的高度,然后创建隐藏iframe(M2页面),设置M2的src属性,将高度附加到M2的url后面,如http://localhost/proxy.html#height=582,代码:

(function(){
	window.onload = function(){
		var w = Math.max(document.documentElement.scrollWidth, document.body.scrollWidth),
		h = Math.max(document.documentElement.scrollHeight, document.body.scrollHeight),
		body = document.getElementsByTagName('body')[0],
		iframe = document.createElement('iframe'),
		proxyUrl = 'http://hsz-15128:88/proxy.html#'+w+'|'+h;
		
		iframe.setAttribute('src', proxyUrl);
		iframe.style.width = '0';
		iframe.style.height = '0';
		iframe.style.borderWidth = '0';
		body.appendChild(iframe);
	}
})();


然后在proxy.html页面中添加如下代码

(function(){
	window.onload = function(){
		var hash = self.location.hash,
			index = hash.indexOf('#'),
			datas = [],
			w, 
			h,
			piframe;
		
		if( index != -1){
			datas = hash.substr(index+1).split('|');
			
			w = datas[0];
			h = datas[1];
			
			piframe = parent.parent.document.getElementById('cross');
			piframe.style.width = w +'px';
			piframe.style.height = h + 'px';
			
		}
	}
})();

取得合作伙伴页面的高度并传给主页面,并重新设置主页面中iframe


来自  https://my.oschina.net/forcoding/blog/67663?fromerr=T4ZnYlSh

普通分类: