当前位置：网站首页>iframe标签属性说明详解[通俗易懂]

iframe标签属性说明详解[通俗易懂]

2022-08-01 12:46:00 【全栈程序员站长】

大家好，又见面了，我是你们的朋友全栈君。

Iframe 标签详解<Iframe src=”example.htm” width=”300″ heitht=”100″></IFRAME> example.htm 是被嵌入的页面，标签 <IFRAME> 还有一些可用的参数设置如下： marginwidth:网页中内容在表格右侧的预留宽度；例如：marginwidth=”20″，单位是 pix，下同。 marginheight:网页中内容在表格顶部预留的高度； hspace:网页右上角的的横坐标； vspace:网页右上角的纵坐标； frameborder:是否显示边缘；填”1″表示”是”，填”0″表示”否” scrolling:是否出现滚动条；填”1″表示”是”，填”0″表示”否” 在HTM(HTML)文件中是否可以像PHP、ASP文件一样嵌入其他文件呢？下面笔者介绍用iframe来实现的方法。 iframe元素的功能是在一个文档里内嵌一个文档，创建一个浮动的帧。其部分属性简介如下： name：内嵌帧名称 width：内嵌帧宽度(可用像素值或百分比) height：内嵌帧高度(可用像素值或百分比) frameborder：内嵌帧边框 marginwidth：帧内文本的左右页边距 marginheight：帧内文本的上下页边距 scrolling：是否出现滚动条(“auto”为自动，“yes”为显示，“no”为不显示) src：内嵌入文件的地址 style：内嵌文档的样式(如设置文档背景等) allowtransparency：是否允许透明明白了以上属性后，我们可用以下代码实现，在main.htm中把samper.htm文件的内容显示在一个高度为80、宽度为100%、自动显示边框的内嵌帧中让iframe自动适应内容的高度

js代码：

<script>
function autoResize()
{
try
{
document.all["inner"].style.height=inner.document.body.scrollHeight
}
catch(e){}
}
</script>

html代码：

<iframe name="inner" src="/ads/?ad=google&ad2=biz2008" marginwidth="0" marginheight="0" frameborder="0" scrolling="no" width="100%" style="height:expression(1); aho:expression(autoResize())"></iframe>

自动适应高度的代码又找到一个好的

代码：

<script type=text/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(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+FFextraHeight; 
} 
else if (pTar.Document && pTar.Document.body.scrollHeight){ 
//ie5+ syntax 
pTar.height = pTar.Document.body.scrollHeight; 
} 
} 
 
} 
--> 
</script> 
</HEAD> 
<body οnmοusemοve="closesubnav(event);"> 
 
<form id="Form1" method="post" runat="server"> 
<FONT face="宋体"> 
<uc1:Admin_header id="Admin_header1" runat="server"></uc1:Admin_header></FONT> 
<div id="pagecell1" > 
<iframe name="down" width="100%" frameborder="0" src="introduction.aspx" scrolling="no" id="down" οnlοad="javascript:dyniframesize('down');" 
/> 
</div> 
</form> 
</body> 
</HTML>

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/126514.html原文链接：https://javaforall.cn

原网站

版权声明
本文为[全栈程序员站长]所创，转载请带上原文链接，感谢
https://cloud.tencent.com/developer/article/2063500