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

Iframe标签详解<Iframesrc=”example.htm”width=”300″heitht=”100″></IFRAME>example.htm是被嵌入的页面,标签<IFRAME>还有一些可用的参数设置如下:marginwidth:网页中内容在表格右侧的预留宽度;例如:marginwidth=”20″,单位是pix,下…

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

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.net/126514.html原文链接:https://javaforall.net

赞 (0)
全栈程序员-站长的头像全栈程序员-站长

相关推荐

  • 远程开机(外网WOL远程唤醒)「建议收藏」

    远程开机(外网WOL远程唤醒)「建议收藏」Win10开启网络唤醒功能的操作方法:PS:远程唤醒的要求1.首先,我们要在主板BIOS里面设置WOL唤醒功能的开关,大部分主板都会支持唤醒2.电脑的主板和网卡需要支持网络唤醒。一般无线网卡是不支持的,板载的有线网卡一般是可以的。3.所在网络环境需要有公网IP。如果是ADSL拨号的话,如果获取的是私网地址的话,那可以向运营商申请公网IP。4.主机跟路由器要保证一直通电,…

    2022年6月2日
  • uboot启动过程详解

    uboot启动过程详解

    2022年3月2日
  • jdbctemplate.query_query方法

    jdbctemplate.query_query方法Document.querySelectorAllSummaryReturnsalistoftheelementswithinthedocument(usingdepth-firstpre-ordertraversalofthedocument’snodes)thatmatchthespecifiedgroupofselectors….

    2022年10月28日
  • 冰刃(IceSword)的使用方法(基础篇)

    冰刃(IceSword)的使用方法(基础篇)

    2021年8月6日
  • 独立成分分析(ICA)

    独立成分分析(ICA)1.概念独立成分分析是从多元(多维)统计数据中寻找潜在因子或成分的一种方法.ICA与其它的方法重要的区别在于,它寻找满足统计独立和非高斯的成分。这里我们简要介绍ICA的基本概念、应用和估计原理。1.1 多元数据的线性表示统计数据处理及相关领域中的一个重要和需要长期研究的问题就…

    2022年5月17日
  • 实现阿里云DDNS解析[通俗易懂]

    实现阿里云DDNS解析[通俗易懂]我有三种设备,synologyopenwrtraspberryopenwrt1,首先,我在openwrt上实现,这有分为二种方法,其实也是一种方法,1,下载ddns-scripts_aliyun_1.0.0-1_all.ipk这个安装包,直接安装,在app-ddns里面就可以看到阿里去的服务商了,然后输入用户名,密码就可以了。2,使用自定义的脚本也行,raspberrysynology…

    2022年6月7日

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号