方式一:在被嵌入页里写入代码
假设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高度,而不显示其滚动条 js #### 背景介绍 在网页开发过程中,经常会遇到需要在一个页面内嵌入另一个页面的情况,这时通常会使用HTML中的`iframe`元素来实现。然而,当嵌入的内容高度不确定或者...
以前,我在做网站的时候,碰到...我使用Iframe的时候,如果我某个页面高于Iframe的时候,就会显示滚动条.但我又不想把有些固定的东西每个页面都写.请教了前辈之后,问题终于可以解决了,于是写了个例子,供有需要的人参考!
为了适应内容的变化,layer插件提供了layer.iframeAuto方法,该方法能够根据iframe内部HTML的高度自动调整iframe的大小,从而实现弹出层内容的自适应。 然而,作者在使用layer.iframeAuto方法时遇到了一个问题,即...
如果使用ueditor的内置功能插入图片,需要修改`ueditor\ueditor.all.min.js`中的单图上传按钮代码,以确保图片被插入时自动调整宽度。 ### 补充:处理粘贴带有图片的Word文档 2018年7月3日的更新中,提到了处理在...
- **设置初始内容**:通过 `setContent` 方法设置编辑器的初始内容。 #### 8. 自定义按钮 除了内置的工具栏按钮外,Ueditor还支持自定义按钮,可以扩展编辑器的功能或集成外部服务。实现自定义按钮的方法主要包括...
但为了实现更丰富的交互功能,如播放/暂停控制、进度条、音量调节等,开发者通常会依赖JavaScript库或框架,如JW Player、Vimeo Player、YouTube IFrame Player API等。这些播放器不仅提供了基本的播放功能,还支持...
通过设置 `src` 属性指定视频源,`controls` 属性添加控制条(如播放/暂停按钮、音量调节等),可以创建一个基本的视频播放器。例如: ```html <video src="myVideo.mp4" controls></video> ``` 然而,由于浏览器...
- **应用场景**:适用于需要在iframe内编辑内容的场景。 **4. Jeditable – edit in place plugin for jQuery** - **功能概述**:实现在位编辑功能。 - **应用场景**:适用于需要快速编辑表单内容的场景。 #### ...