`

Irame 自适应高度

js 
阅读更多
第一种:在子页面添加JS,等页面加载完成执行
window.parent.document.getElementById("mainFrame").style.height=(document.body.scrollHeight+20) +"px";


第二种:在父页面执行
<iframe  src="<c:url value='/Controller?sl.service=VillBlogService.vill_index&userid=${userMap["userid"] }' />" name="mainFrame" 
      		id="mainFrame"  width="100%" scrolling="no" frameborder="0"  onload="javascript:dyniframesize('mainFrame');" ></iframe>
 <script language="javascript" type="text/javascript"> 
		function dyniframesize(down) { 
			var pTar = null; 
			if (document.getElementById){ 
				pTar = document.getElementById(down); 
			}else{ 
				eval('pTar = ' + down + ';'); 
			} 
			if (pTar && !window.opera){ 
				//begin resizing iframe 
				pTar.style.display="block" 
				if (pTar.contentDocument && pTar.contentDocument.body.offsetHeight){ 
					//ns6 syntax 
					pTar.height = pTar.contentDocument.body.offsetHeight +20; 
					//pTar.width = pTar.contentDocument.body.scrollWidth+20; 
				} 
				else if (pTar.Document && pTar.Document.body.scrollHeight){ 
					//ie5+ syntax 
					pTar.height = pTar.Document.body.scrollHeight; 
					//pTar.width = pTar.Document.body.scrollWidth; 
				} 
			} 
		} 
	</script> 


如果iframe里面经常改变dom对象,可加上window.setInterval("dyniframesize('mainFrame')", 200); 循环调用该方法,实时改变高度。



第三种:非常单一的iframe,在iframe里不做dom操作
<iframe id="frame_content" src="iframe_b.html" scrolling="no" frameborder="0" onload="this.height=this.contentWindow.document.documentElement.scrollHeight"></iframe>
分享到:
评论

相关推荐

    irame

    通常,这样的博客可能会涵盖如何使用`iframe`,包括设置`src`属性来指定要加载的URL,调整`iframe`的宽度和高度,以及处理跨域问题等。 标签“源码 工具”暗示了讨论可能涉及到`iframe`的实际代码示例和一些辅助...

    irame下网页失焦

    在IT行业中,"iframe"(内联框架)是一种在HTML文档中嵌入其他HTML文档的元素,常用于实现页面的分块展示或者加载外部资源。然而,在特定场景下,如"严格考试时,需要求不能移开考试界面",确保用户在iframe中保持...

    VUE实时监听元素距离顶部高度的操作

    效果图如下所示 ... &lt;!-- 监听ref距离顶部高度 --&gt; 今日热门 今日热销 ... window.addEventListener('scroll',this.handleScrollx,true) ... console.log('距离顶部高度',this.$refs.pronbit.getBounding

    iframe父与子、子与子之间控制以及js相互调用实际例

    **iframe的介绍** ...它允许开发者在一个页面中加载多个独立的网页,实现页面内容的并行加载,提高用户体验。iframe通常用于显示广告、嵌入视频、地图等,或者用于实现页面部分的动态更新,比如通过JavaScript动态加载...

    可以左右拖动的iframe框架

    在IT行业中,网页开发是一项重要的任务,而框架和iframe的使用是其中不可或缺的部分。"可以左右拖动的iframe框架"是一种创新的实现方式,它允许用户通过鼠标在水平方向上移动iframe,从而提供了更灵活的网页布局和...

    右下角iFrame嵌套的广告代码,可关闭.rar

    使用iFrame嵌套技术实现的网页右下角弹出广告代码,可手动关闭,广告自己也会关闭,当广告的内容播放完毕的时候,自己也就关闭了,在各大门户网站见的比较多,IRAME嵌套也有自己的好处,比如每次更新广告代码比较...

    关于解决iframe标签嵌套问题的解决方法

    问题描述 当我们使用easyui做后台管理系统的时候,会使用tree组件来实现树形菜单,而我们每点击一次相应菜单,会根据是否有url来判断是否是一级菜单,以及是否已经存在 //根据该节点名字判断该节点是否存在 ...

    iFrame嵌套技术的网页右下角弹出广告代码,可关闭

    脚本资源,Ajax/JavaScript,右下角,弹窗广告 使用iFrame嵌套技术实现的网页右下角弹出广告代码,可手动关闭,广告自己也会关闭,当广告的内容播放完毕的时候,自己也就关闭了,在各大门户网站见的比较多,IRAME嵌套...

    二级减速器课程设计说明书reducer design specification.doc

    It Is mainly composed of irame conveyor belt, supporting roller, roller, tensioning device and belt conveyor motor device. It can put the material on a certain conveying line and form a conveying ...

Global site tag (gtag.js) - Google Analytics