方式一:在被嵌入页里写入代码
假设main.htm文件内容:
<iframe src="iframe.htm"></iframe>
则在iframe.htm文件中加入如下代码:
<script language="JavaScript">
<!--
function window.onload() {
if(top.location != self.location){
var a = window.parent.document.getElementsByTagName('iframe');
for (var i=0; i<a.length; i++){
if (a[i].name == self.name) {
a[i].height = document.body.scrollHeight+10; return;
}
}
}
}
// -->
</script>
要测试效果则在iframe.htm文件中再加入一个表格(表格高度设大些):
<table width="100%" height="1000"><tr><td valign="bottom">Hello!</td></tr></table>
用浏览器打开mail.htm就可以预览效果。
方式二:在父页中加入代码,被嵌入页不变(有两种方法)
一法:
在父页中加入如下代码:
<script language="Javascript">
var getFFVersion=navigator.userAgent.substring(navigator.userAgent.indexOf("Firefox")).split("/")[1]
//extra height in px to add to iframe in FireFox 1.0+ browsers
var FFextraHeight=getFFVersion>=0.1? 16 : 0
function dyniframesize(iframename) {
var pTar = null;
if (document.getElementById){
pTar = document.getElementById(iframename);
}
else{
eval('pTar = ' + iframename + ';');
}
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+FFextraHeight;
}
else if (pTar.Document && pTar.Document.body.scrollHeight){
//ie5+ syntax
pTar.height = pTar.Document.body.scrollHeight;
}
}
}
</script>
<iframe id="myTestFrameID" onload="javascript:{dyniframesize('myTestFrameID');}" marginwidth=0 marginheight=0 frameborder=0 scrolling=nosrc="myiframe.htm" width=200 height=100></iframe>
然后myiframe.htm中为正常页面内容。
用浏览器打开父页即可看到效果,该方法对各种浏览器通用,包括IE、FF、Opera等。
二法:
在父页中写入以下代码:
<iframe id=headlogin marginWidth=0 marginHeight=0 src="myiframe.htm" frameBorder=0 width=100% scrolling=no height=25onload="this.height=this.contentWindow.document.body.scrollHeight"></iframe>
用浏览器打开父页即可看到效果。以上JScript代码在opera下不能正常显示出效果。
分享到:
相关推荐
当我们需要在`iframe`中展示的内容高度不固定时,一个常见的需求就是使`iframe`的高度能自动适应其内嵌页面的高度,以避免滚动条的出现或内容被截断。标题"iframe高度随子页高度变化"和描述中提到的问题,正是关注于...
### 自动调节iframe高度,而不显示其滚动条 js #### 背景介绍 在网页开发过程中,经常会遇到需要在一个页面内嵌入另一个页面的情况,这时通常会使用HTML中的`iframe`元素来实现。然而,当嵌入的内容高度不确定或者...
然而,`<iframe>`的高度自适应问题常常困扰着开发者,尤其是当`<iframe>`内部的内容动态加载或者变化时,如何让`<iframe>`自动调整其高度以适应内容,而不会导致滚动条溢出或内容被截断,成为了一个常见需求。...
为了解决这个问题,我们需要让`iframe`根据其内容自动调整高度和宽度。本篇文章将详细探讨如何实现`iframe`根据页面内容自适应高度和宽度。 首先,我们需要理解`iframe`的基本结构。一个简单的`iframe`标签如下: ...
标题提到的“iframe自动适应高度(完美自适应高度嵌套代码)”提供了一个解决方案,它能够确保`iframe`在各种主流浏览器中都能正确地自适应内容高度,包括360浏览器、IE6-9、遨游、火狐以及搜狗浏览器。 在传统的`...
在默认情况下,`iframe`的高度是固定的,这意味着当嵌入的内容高度发生变化时,`iframe`不会自动调整其高度。这可能会导致内容溢出或出现滚动条的情况,从而影响用户体验。因此,实现`iframe`的高度自适应变得尤为...
这样`<iframe>`会根据内容自动扩展高度。 - 使用Grid布局: ```html ;"> <iframe id="iyxzl" src="your-url.html" style="grid-row: 1 / span 1;"></iframe> ``` #### 六、总结 本文详细介绍了如何实现`...
然而,`iframe`在处理跨域内容时,会受到同源策略的限制,导致一些功能无法正常使用,比如获取iframe内的DOM元素或设置其高度。本文将详细讲解如何解决`iframe`跨域问题以及实现自动适应高度的功能。 1. **同源策略...
### 自动改变iframe的高度 在Web开发中,`iframe`是一种常用的技术,它允许在一个HTML页面中嵌入另一个HTML页面。然而,在实际应用过程中,如何让`iframe`根据其内部内容自适应高度,是一个常见的需求。本文将详细...
Iframe 高度自适应是指在网页中嵌入的 iframe 元素能够根据其内容自动调整高度,以适应不同的浏览器和屏幕尺寸。js 控制 Iframe 高度自适应是指使用 JavaScript 语言来控制 iframe 的高度,使其能够自动调整以适应...
然而,`iframe` 的一个常见问题是其内容区域的高度可能超过其本身的显示区域,导致滚动条出现或者内容被截断。为了解决这个问题,我们需要让`iframe`能够自适应其内容的高度。本文将详细讲解如何使用JavaScript实现`...
// iframe内容页 window.parent.postMessage({height: document.documentElement.scrollHeight}, '*'); // 父页面 window.addEventListener('message', function(event) { if (event.origin !== '预期的源') ...
标题“Iframe 高度自适应浏览器高度”涉及的核心知识点是如何让Iframe的大小根据其内容自动调整,特别是高度,以便始终保持与浏览器窗口的高度同步,从而提供更好的用户体验。 首先,我们需要了解Iframe的基本结构...
它们通常使用`postMessage`,并在iframe内部检测内容变化,自动调整高度。 3. **服务器端配合**:如果能够控制iframe加载的页面,可以在服务器端添加一个特殊的查询参数,比如`height`,并根据这个参数返回动态调整...
然而,由于`iframe`内容加载后可能会有不同的高度,如果不能自适应调整,可能会导致页面布局错乱。`javascript`提供了解决这个问题的方案,即动态调整`iframe`的高度,确保内容完整显示,同时保持页面整洁美观。下面...
然而,在使用`iframe`时,如何使其高度和宽度能够根据内容自动调整,是开发者们经常遇到的问题之一。 #### 一、基本概念 在默认情况下,`iframe`的高度和宽度是固定的,需要开发者手动设置。当嵌入的内容发生变化...
"iframe实时高度检测"是解决了一个常见问题:当我们在一个页面中使用`iframe`展示其他内容时,如何确保`iframe`的内容能够完全显示,而不需要滚动条或者部分内容被裁剪。 ### 1. `iframe`的基本用法 `iframe`标签...
2. **自适应需求**:随着内容的变化自动调整`<iframe>`的高度,避免出现不必要的滚动条或内容被隐藏的情况。 #### 二、实现方法 ##### 1. JavaScript动态调整高度 通过JavaScript监听`<iframe>`加载完成事件(`...
iframe包含的页面的高度,兼容性好,iframe高度自适应
然而,若希望`iframe`的高度自动适应子页面内容,我们需要进行一些额外的处理。 首先,由于同源策略的限制,只有当`iframe`加载的页面与包含它的页面在同一域名下时,我们才能通过JavaScript获取`iframe`的内容信息...