iframe的用法

转载 2007年09月30日 21:01:00

iframe嵌入网页的用法
 
 

iframe并不是很常用的,在标准的网页中非常少用。但是有朋友经常问到,下面我简单地介绍一下它的用法,你只要熟练掌握这些参数足矣。

<iframe>也应该是框架的一种形式,它与<frame>不同的是,iframe可以嵌在网页中的任意部分。我们举第一个例子,具体代码如:
<iframe width=420 height=330 frameborder=0 scrolling=auto src=URL></iframe>,这里的URL可以是相对路径,也可以是绝对路径,效果如:

width表示宽度,height表示宽度,可根据实际情况调整。
scrolling表示是否显示页面滚动条,可选的参数为auto、yes、no,如果省略这个参数,则默认为auto。

二、如何实现页面上的超链接指向这个嵌入的网页?
只要给这个iframe命名就可以了。方法是<iframe name=**>,例如我命名为aa,写入这句HTML语言<iframe width=420 height=330 name=aa frameborder=0 src=http://www.cctv.com></iframe>,然后,网页上的超链接语句应该写为:<a href=URL target=aa>

  在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 name="import_frame" width=100%

   height=80 src="samper.htm" frameborder=auto〉

  〈/iframe〉

  不错吧,马上“Ctrl+C”、“Ctrl+V”试试。

  有时我们为强调页面的某项内容,想让它先于页面的其他内容显示。同样用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〉

  first.htm的内容就会先于页面的其他内容出现在您的浏览器里了,是不是很简单?再“Ctrl+C”、“Ctrl+V”一次? 

iframe标签用法详解

iframe标签用法详解
  • baidu_25310663
  • baidu_25310663
  • 2015年08月25日 13:35
  • 27244

iframe使用总结(实战)

说在前面的话,iframe是可以做很多事情的。 例如: a>通过iframe实现跨域; b>使用iframe解决IE6下select遮挡不住的问题 c>通过iframe解决Ajax的前进后退问题 d>...
  • BJ_benjamin
  • BJ_benjamin
  • 2013年09月06日 20:51
  • 48188

IFrame的用法

IFrame介绍: 也应该是框架的一种形式,iframe和frame比较相似,但是有一个根本的区别,iframe可以活动,而frame是不可活动的。换句话说,iframe可以指定其坐标位置。 大部...
  • hejingyuan6
  • hejingyuan6
  • 2013年11月27日 21:24
  • 6997

HTML iframe 用法小总结

iframe是框架的一种形式,也比较常用到,下面是对其在平时常用到属性的总结 Iframe用法,下面是一个常规的列子 其中: iframe用于设置文本或图形的浮动图文框或容器。  bord...
  • ssisse
  • ssisse
  • 2016年07月17日 14:17
  • 234

jsp页面的iframe的用法

想要实现下面页面的布局(左边菜单,右边动态的展现相应的jsp页面)你需要的关键代码如下:我的待办任务我要报销我要申请采购流程监控...
  • ziliang871118
  • ziliang871118
  • 2011年02月09日 16:07
  • 18336

谈IFRAME标签的使用作用及技巧

纵观时下网站,本来网速就有些慢,可是几乎每页都要放什么Banner,栏目图片,版权等一大堆雷同的东西,当然,出于网站风格统一、广告效应的需要,本无可厚非,可毕竟让用户的钱包为这些“点缀“的东西”日益消...
  • shendeguang
  • shendeguang
  • 2012年11月10日 21:53
  • 1209

iframe target属性

target属性 这个属性指定所链接的页面在浏览器窗口中的打开方式,它的参数值主要有:_blank、_parent、_self、_top ,这些参数值代表的含义如下: _blank,在浏览器新窗...
  • YangMing_number
  • YangMing_number
  • 2016年10月31日 14:05
  • 908

iFrame应用实例讲解——页面无需刷新的异步文件上传!

说到iframe,现在用它的人是越来越少了,并且很多人都相信它应该被AJAX所取代,的确如此,因为AJAX太出色了。 不过有一种情况的实现我还是选择了iframe,这就是本文要说的文件的异步上传,感...
  • Eric6
  • Eric6
  • 2010年09月06日 14:39
  • 12213

iframe布局 详细用法 及缺点

frame与Iframe的各项属性   frame例子:         Sorry,your explorer doesn't support the frame...    ...
  • zhpengfei0915
  • zhpengfei0915
  • 2014年03月18日 10:43
  • 6304

使用用隐藏的 IFrame 提交表单开发的经验总结

 Ajax虽然不错,但无法上传文件,可以用隐藏的 IFrame 提交表单部分替代Ajax。原理如下:1.写一个Javascript类,动态添加一个IFrame。具体是在 document.body 对...
  • pardxa
  • pardxa
  • 2007年04月20日 18:38
  • 7096
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:iframe的用法
举报原因:
原因补充:

(最多只允许输入30个字)