iframe设置(iframe先显示)

编程之家2026-06-29901次浏览

各位老铁们好，相信很多人对iframe设置都不是特别的了解，因此呢，今天就来为大家分享下关于iframe设置以及iframe先显示的问题知识，还望可以帮助大家，解决大家的一些困惑，下面一起来看看吧！

怎么让iframe自适应高度

什么是自适应高度吧。所谓iframe自适应高度，就是，基于界面美观和交互的考虑，隐藏了iframe的border和scrollbar，让人看不出它是个iframe。如果iframe始终调用同一个固定高度的页面，我们直接写死iframe高度就可以了。而如果iframe要切换页面，或者被包含页面要做DOM动态操作，这时候，就需要程序去同步iframe高度和被包含页的实际高度了。

顺便说下，iframe在迫不得已的时候才去用，它会给前端开发带来太多的麻烦。

传统做法大致有两个：

方法一，在每个被包含页在本身内容加载完毕之后，执行JS取得本页面的高度，然后去同步父页面的iframe高度。

方法二，在主页面iframe的onload事件中执行JS，去取得被包含页的高度内容，然后去同步高度。

在代码维护角度考虑，方法二是优于方法一的，因为方法一，每个被包含页都要去引入一段相同的代码来做这个事情，创建了好多副本。

如果只考虑FX和IE，并且，iframe里面内容也不进行DOM操作，那仍然可以用最简单最方便的传统处理方式：

两个方法都只处理了静的东西，就是只在内容加载的时候执行，如果JS去操作DOM引起的高度变化，都不太方便。

如果在主窗口做一个Interval，不停的来获取被包含页的高度，然后做同步，是不是即方便，又解决了JS操作DOM的问题了呢？答案是肯定的。

Demo页面：主页面 iframe_a.html，被包含页面 iframe_b.htm和 iframe_c.html

主页面代码示例：

function reinitIframe(){

var iframe= document.getElementById("frame_content");

try{

iframe.height= iframe.contentWindow.document.documentElement.scrollHeight;

}catch(ex){}

}

window.setInterval("reinitIframe()", 200);

</script>

一直执行，效率会不会有问题？

我做了测试，同时开5个窗口（IE6、IE7、FF、Opera、Safari）执行这个代码，不会对CPU有什么影响，甚至调整到2ms，也没影响（基本维持在0%占用率）。

下面谈谈各浏览器的兼容性问题，如何获取到正确的高度，主要是对body.scrollHeight和documentElement.scrollHeight两个值得比较。注意本文用的是这个doctype，不同的doctype应该不会影响结果，但是假如你的页面没有申明doctype，那还是先去加一个吧。

<!DOCTYPE HTML PUBLIC"

在主页面追加以下测试代码，以输出这两个值，代码示例：

<div><button onclick="checkHeight()">Check Height</button></div><script type="text/javascript">

function checkHeight(){

var iframe= document.getElementById("frame_content");

var bHeight= iframe.contentWindow.document.body.scrollHeight;

var dHeight= iframe.contentWindow.document.documentElement.scrollHeight;

alert("bHeight:"+ bHeight+", dHeight:"+ dHeight);

}

</script>

被加载页面，可以切换一个绝对定位的层，来使页面高度动态改变。如果层展开，则会撑高页面高度。代码示例：

<div><button onclick="toggleOverlay()">Toggle Overlay</button>

</div>

</div>

function toggleOverlay(){

var overlay= document.getElementById('overlay');

overlay.style.display=(overlay.style.display=='none')?'block':'none';

}

</script>

下面列出以上代码在各浏览器的测试值：

（bHeight= body.scrollHeight, dHeight= documentElement.scrollHeight,红色=错误值,绿色=正确值）

层隐藏时

层展开时

bHeight

dHeight

bHeight

dHeight

IE6 184 184 184 303

IE7 184 184 184 303

FF 184 184 184 303

Opera 181 181 300 300

Safari 184 184 303 184

暂且无视Opera比别人少3像素的问题…可以看出，如果没有绝对定位的东西，两个值是相等的，取哪个都无所谓。

但是如果有，那么各个浏览器的表现不太相同，单取哪个值都不对。但可以找到了一条规律，那就是取两个值得最大值可以兼容各浏览器。所以我们的主页面代码就要改造成这样了：

function reinitIframe(){var iframe= document.getElementById("frame_content");

try{

var bHeight= iframe.contentWindow.document.body.scrollHeight;

var dHeight= iframe.contentWindow.document.documentElement.scrollHeight;

var height= Math.max(bHeight, dHeight);

iframe.height= height;

}catch(ex){}

}

window.setInterval("reinitIframe()", 200);

这样子，基本解决了兼容性问题。顺便说下，不光绝对定位的层会影响到值，float也会导致两个值的差异。

如果你演示Demo后，会发现，除了IE，其他浏览器中，当层展开后再隐藏，取到的高度值还是维持在展开的高度303，而非隐藏回去的真正值184，就是说长高了之后缩不回去了。这个现象在不同被包含页面之间做切换也会发生，当从高的页面切换到矮页面的时候，取到的高度还是那个高的值。

可以归纳为，当iframe窗体高度高于文档实际高度的时候，高度取的是窗体高度，而当窗体高度低于实际文档高度时，取的是文档实际高度。因此，要想办法在同步高度之前把高度设置到一个比实际文档低的值。所以，在iframe的添加 onload=”this.height=100″，让页面加载的时候先缩到足够矮，然后再同步到一样的高度。

这个值，在实际应用中决定，足够矮但又不能太矮，否则在FF等浏览器里会有很明显的闪烁。DOM操作的时候主页面无法监听到，只能DOM操作完了之后把高度变小了。

在我的一个实际项目中，在成本和收益之间权衡，我并没有做这个事情，因为每个DOM函数中都要插入这个代码，代价太高，其实层缩回去不缩掉也不是那么致命。包括Demo里，也没有去做这个事情。如果读者有更好的方法，请告诉我。

这是最终的主页面的代码：

function reinitIframe(){

var iframe= document.getElementById("frame_content");

try{

var bHeight= iframe.contentWindow.document.body.scrollHeight;

var dHeight= iframe.contentWindow.document.documentElement.scrollHeight;

var height= Math.max(bHeight, dHeight);

iframe.height= height;

}catch(ex){}

}

window.setInterval("reinitIframe()", 200);

</script>

附Demo页面：主页面 iframe_a.html，被包含页面 iframe_b.htm和 iframe_c.html

JavaScript如何修改页面中iframe的属性值

页面一刷新，所有JS对页面做的修改都会恢复的，如果楼主想让浏览器记住JS设定的width之类的数据（即使刷新页面，也依然能够记住刷新前的JS设置），目前来讲：

1、HTML5有客户端数据储存的方法，但是支持的浏览器不多，jQuery库的Data对象实现了部分的HTML5客户端储存的功能，而且多浏览器支持；

2、简单点的办法就是使用URL参数，即在使用JS对页面进行修改（比如重新设定页面中某个iframe的width）时，同时把设定的值添加到页面的URL中，这样当页面刷新时，设置的值并没有丢失，只要通过适当的方法，把这些值再读出来，并重新设置，就可以模拟保持设置。举个简单例子：

<html>

<head>

//储存当前页面的JS对iframe做出的设置

var settings={};

function autoSet(){

//处理URL，如果带有初始设置，则读取

var sval= location.href;

if(sval.indexOf('?')){

var vals= sval.split('?')[1];

if(vals.indexOf('&')){

vals= vals.split('&');

for(var i=0;i<vals.length;i++){

settings[vals[i].split('=')[0]]= vals[i].split('=')[1];

autoSetVal(vals[i].split('=')[0],vals[i].split('=')[1]);

}

}else{

settings[vals.split('=')[0]]= vals.split('=')[1];

autoSetVal(vals.split('=')[0],vals.split('=')[1]);

}

function autoSetVal(tag,val){

var ifm= document.getElementById('ifm1');

ifm[tag]= val;

}

function setVal(tag,val){

settings[tag]= val;

fixURL();

}

function getSURL(){

var sval= location.href;

if(sval.indexOf('?')){

return sval.split('?')[0];

}else{

return sval;

}

function fixURL(){

var url= getSURL();

if(settings!={}){

url+='?';

var vals= [];

for(var i in settings){

vals.push(i+'='+settings[i]);

}

url+= vals.join('&');

}

location.href= url;

}

window.onload= function(){

autoSet();

}

</script>

</head>

<body>

</body>

</html>

iframe 属性

iframe元素的功能是在一个html内嵌一个文档，创建一个浮动的帧。iframe可以嵌在网页中的任意部分

name：内嵌帧名称

width：内嵌帧宽度(可用像素值或百分比)

height：内嵌帧高度(可用像素值或百分比)

frameborder：内嵌帧边框

marginwidth：帧内文本的左右页边距

marginheight：帧内文本的上下页边距

scrolling：是否出现滚动条(“auto”为自动，“yes”为显示，“no”为不显示)

src：内嵌入文件的地址

style：内嵌文档的样式(如设置文档背景等)

allowtransparency：是否允许透明

iframe还有一个很有用的用法：强调页面的某项内容

先把要强调显示的内容另存为一个文件，如first.htm，然后通过一个预载页index.htm，内容如下：

〈meta http-equiv="refresh" content="3,url=index2.htm"〉

〈body〉

页面加载中，请稍候……〈iframe src="first.htm" style="display:none"〉〈/iframe〉

〈/body〉

主文件index2.htm

〈body〉

〈iframe src="first.htm"加入其他属性限制〉〈/iframe〉

〈/body〉

解释成“浏览器中的浏览器“很是恰当

<IFRAME>用于设置文本或图形的浮动图文框或容器。

BORDER

设定围绕图文框的边缘宽度

FRAMEBODER

设置边框是不否为3维（0=否，1=是）

HEIGHT,WIDTH

设质边框的宽度和高度

SCROLLING

是否有滚动条（YES,NO,AUTO)

SRC

指定IFRAME调用的文件或图片(HTML,HTM,GIF,JPEG,JPG,PNG,TXT,*.*)

-------------------------------------------------------------

“画中画”效果--谈IFRAME标签的使用

纵观时下网站，本来网速就有些慢，可是几乎每页都要放什么Banner，栏目图片，版权等一大堆雷同的东西，当然，出于网站风格统一、广告效应的需要，本无可厚非，可毕竟让用户的钱包为这些“点缀“的东西”日益消得钱憔悴”了，有没有办法，让这些雷同的东西一次下载后就不用再下载，而只下载那些内容有变化区域的网页内容呢？

答案很肯定：应用Iframe标记！

一、Iframe标记的使用

提起Iframe，可能你早已将之扔到“被遗忘的角落”了，不过，说起其兄弟Frame就不会陌生了。Frame标记即帧标记，我们所说的多帧结构就是在一个浏览器窗口中显示多个HTML文件。现在，我们遇到一种很现实的情况：如有一个教程，是一节一节地上，每页末尾做一个“上一节“、“下一节“的链接，除了每节教程内容不同之外，页面其它部分内容都是相同的，如果一页一页地做笨页面，这似乎太让人厌烦了，这时突发奇想，如果有一种方法让页面其它地方不变，只将教程做成一页一页的内容页，不含其它内容，在点击上下翻页链接时，只改变教程内容部分，其它保持不变，这样，一是省时，另则以后如教程有个三长两短的变动，也很方便，不致于牵一发而动全军了;更重要的是将那些广告Banner、栏目列表、导航等几乎每页的都有的东西只下载一次后就不再下载了。 Iframe标记，又叫浮动帧标记，你可以用它将一个HTML文档嵌入在一个HTML中显示。它不同于Frame标记最大的特征即这个标记所引用的HTML文件不是与另外的HTML文件相互独立显示，而是可以直接嵌入在一个HTML文件中，与这个HTML文件内容相互融合，成为一个整体，另外，还可以多次在一个页面内显示同一内容，而不必重复写内容，一个形象的比喻即“画中画“电视。

现在我们谈一下Iframe标记的使用。

Iframe标记的使用格式是:

src：文件的路径，既可是HTML文件，也可以是文本、ASP等；

width、height："画中画"区域的宽与高；

scrolling:当SRC的指定的HTML文件在指定的区域不显不完时，滚动选项，如果设置为NO，则不出现滚动条；如为Auto：则自动出现滚动条；如为Yes，则显示;

FrameBorder：区域边框的宽度，为了让“画中画“与邻近的内容相融合，常设置为0。

比如:

二、父窗体与浮动帧之间的相互控制在脚本语言与对象层次中，包含Iframe的窗口我们称之为父窗体，而浮动帧则称为子窗体，弄清这两者的关系很重要，因为要在父窗体中访问子窗体或相反都必须清楚对象层次，才能通过程序来访问并控制窗体。

1、在父窗体中访问并控制子窗体中的对象

在父窗体中，Iframe即子窗体是document对象的一个子对象，可以直接在脚本中访问子窗体中的对象。

现在就有一个问题，即，我们怎样来控制这个Iframe，这里需要讲一下Iframe对象。当我们给这个标记设置了ID属性后，就可通过文档对象模型DOM对Iframe所含的HTML进行一系列控制。

比如在example.htm里嵌入test.htm文件，并控制test.htm里一些标记对象：

test.htm文件代码为:

<html>

<body>

<h1 id="myH1">hello,my boy</h1>

</body>

</html>

如我们要改变ID号为myH1的H1标记里的文字为hello,my dear，则可用:

document.myH1.innerText="hello,my dear"(其中，document可省)

在example.htm文件中，Iframe标记对象所指的子窗体与一般的DHTML对象模型一致，对对象访问控制方式一样，就不再赘述。

2、在子窗体中访问并控制父窗体中对象

在子窗体中我们可以通过其parent即父（双亲）对象来访问父窗口中的对象。

如example.htm：

<html>

<h1 id="myH2">hello,my wife</h1>

</body>

</html>

如果要在frame1.htm中访问ID号为myH2中的标题文字并将之改为"hello,my friend"，我们就可以这样写：

parent.myH2.innerText="hello,my friend"

这里parent对象就代表当前窗体(example.htm所在窗体)，要在子窗体中访问父窗体中的对象，无一例外都通过parent对象来进行。

Iframe虽然内嵌在另一个HTML文件中，但它保持相对的独立，是一个“独立王国“哟，在单一HTML中的特性同样适用于浮动帧中。

试想一下，通过Iframe标记，我们可将那些不变的内容以Iframe来表示，这样，不必重复写相同的内容，这有点象程序设计中的过程或函数，减省了多少繁琐的手工劳动！另外，至关重要的是，它使页面的修改更为可行，因为，不必因为版式的调整而修改每个页面，你只需修改一个父窗体的版式即可了。

有一点要注意，Nestscape浏览器不支持Iframe标记，但在时下IE的天下，这似乎也无大碍，广泛采用Iframe标记，既为自己(网站)着了想，又为网友节省了网费，何乐而不为？

例子：

2:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::

用了iframe后发现滚动条不漂亮想用2个图片来代替↑↓

应该怎么实现呢？

回答：

用下列代码替换网页的<title>..</title>

function scroll(n)

{temp=n;

Out1.scrollTop=Out1.scrollTop+temp;

if(temp==0) return;

setTimeout("scroll(temp)",80);

}

</SCRIPT>

<TR>

文字<BR>文字<BR>

文字<BR>

文字

<BR>

</DIV>

</TD>

</TR>

<TR>

</TR>

</TABLE>

内框架Iframe的使用

使用Iframe可以在一人表格内调用一个外部文件，是非常有用的。本网站在很多页面上都使用了iframe效果。

现在我们学一下Iframe标记的使用。

Iframe标记的使用格式是:

src：文件的路径，既可是HTML文件，也可以是文本、ASP等；

width、height："内部框架"区域的宽与高；

scrolling:当SRC的指定的HTML文件在指定的区域不显不完时，滚动选项，如果设置为NO，则不出现滚动条；如为Auto：则自动出现滚动条；如为Yes，则显示;

FrameBorder：区域边框的宽度，为了让“内部框架“与邻近的内容相融合，常设置为0。

name:框架的名字，用来进行识别。

比如:

当你想用父框架控制内部框架时，可以使用： target="框架的名字"来控制。

Dreamweaver MX进阶教程（一）可视化操作iframe

iframe也称作嵌入式框架，嵌入式框架和框架网页类似，它可以把一个网页的框架和内容嵌入在现有的网页中。

从Dreamweaver MX开始，可以可视化操作iframe，不再需要第三方插件。

插入iframe

1.点击“插入面板”的“标签选择器”

.在“标签选择器”对话框中，选择iframe标签，点击“插入”按钮。

.在“标签编辑器-Iframe”对话框中，根据面板提示操作。最基本的两项是“源”和“名称”。

源：点击“浏览”按钮，选择要出现在iframe中的网页文件。

名称：输入的名称，将作为这个iframe的标识，其它的链接如果要在这个iframe打开，网页打开“目标”就需要输入此“名称”。

宽度和高度：可以输入象素值，也可以输入100％。

边距宽度和边距高度：设置和外围标签的边距。

对齐：设置对齐方式。

滚动：设置是否允许出现滚动条。

显示边框：选择是否出现边框。

设置链接在某个iframe中打开

选中链接，在属性面板中的“目标”项，手工输入目标iframe的“名称”。

iframe透明

为了使iframe内容和网页背景相同，需要使iframe透明。

在“标签编辑器-Iframe”对话框中，选择“浏览器特定的”项目卡，选中“允许透明”。

框架包含应用程序

在“标签编辑器-Iframe”对话框中，选择“浏览器特定的”项目卡，选中“框架包含应用程序”。

Iframe的替代内容

在某些不支持iframe的浏览器中，iframe将不能显示。这时需要输入替代内容。

在“标签编辑器-Iframe”对话框中，选择“替代内容”选项，在替代内容中输入代码或者文字。

如果你还想了解更多这方面的信息，记得收藏关注本站。

代码大全复制代码复制html colspan(html查看器)