iframe标签——HTML中的“画中画”

最新推荐文章于 2024-08-18 21:47:24 发布

April_shu

最新推荐文章于 2024-08-18 21:47:24 发布

阅读量1.6k

点赞数 2

分类专栏：前端

本文链接：https://blog.csdn.net/April_shu/article/details/78398744

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

iframe标签——HTML中的“画中画”

熟悉Web开发的wuli各位好友，相信应该都接触过iframe标签，或者使用过frameset框架。HTML中iframe的使用，不仅是界面

变得更高端大气上档次，而且使用起来也很方便，从而使代码更加高效。因此,iframe标签很受web前端大神们的青睐。当然iframe的用法也很多，下面简单小结一下有关它的用法，希望对初学者有所帮助！

一.iframe的定义：

举个例子：

源代码：

<html>

<head>

<title>iframe元素标签的使用</title>

<body>

<a href="url" target="iframe1">跳转到淘宝</a><br/>

</body>

</head>

</html>

二.iframe的格式：

iframe标签的写法，和大多HTML标签写法相同，iframe标签输入形式为：<iframe>和</iframe>。以<iframe>开头，以</iframe>结尾，将需要的文本内容添加到两个标签之间即可。iframe标签内的内容可以做为浏览器不支持iframe标签时显示。

三. 标签属性：

iframe是inline-block元素。

属性	值	描述	DTD
align	left right top middle bottom	不赞成使用。请使用样式代替。规定如何根据周围的元素来对齐此框架。	TF
frameborder	1 0	规定是否显示框架周围的边框。	TF
height	pixels %	规定 iframe 的高度。	TF
longdesc	URL	规定一个页面，该页面包含了有关 iframe 的较长描述。	TF
marginheight	pixels	定义 iframe 的顶部和底部的边距。	TF
marginwidth	pixels	定义 iframe 的左侧和右侧的边距。	TF
name	frame_name	规定 iframe 的名称。	TF
scrolling	yes no auto	规定是否在 iframe 中显示滚动条。	TF
src	URL	规定在 iframe 中显示的文档的 URL。	TF
width	pixels %	定义 iframe 的宽度。	TF

例1：

<iframe width=420 height=330 frameborder=0 scrolling=auto src=URL></iframe>

width插入页的宽；height插入页的高；scrolling 是否显示页面滚动条（可选的参数为 auto、yes、no，如果省略这个参数，则默认为auto）；frameborder 边框大小；

注：URL建议用绝对路径

传说中百度用：<iframe width=0 height=0 frameborder=0 scrolling=auto src=www.zzidc.com></iframe>

例2：

如果一个页面里面有框架。随便点页面里的连接，要求在这个<iframe> 里打开。在iframe 中加入name=** （**自己设定）

<iframe name=** ></iframe>

然后在修改默认打开模式，：网页HEAD中加上<a href=URL target=**>或部分连接的目标框架设为（**）

注：此处a标签中target属性的的值必须要和iframe标签中的name属性值保持一致。

例3：

要插入一个页面。要求只拿中间一部分，其他的都不要。

代码如下：

<iframe name=123 align=middle marginwidth=0 marginheight=0 vspace=-170 hspace=0 src="http://host.zzidc.com/" frameborder=no scrolling=no width=776 height=1802></iframe>

控制插入页被框架覆盖的深度 marginwidth=0 marginheight=0；控制框架覆盖上部分的深度 vspace=-170

scrolling滚动条要否（auto、yes、no） frameborder框架的边框大小，width=776 height=2500此框架的大小。

注意：有时候我们需要考虑用户的浏览器是否支持iframe标签，那么就需要如下的写法：
<iframe frameborder="0" name="Iframe1" src="http://www.jb51.net/" width="100%" height="200">您的浏览器不支持嵌

入式框架，或者当前配置为不显示嵌入式框架。</iframe>

四： iframe自适应高度和宽度

1.高度
<iframe name="myframe1" src="myframe1.htm" frameborder="0" scrolling="auto" width="100%" height="100%" οnlοad="document.all['myframe'].style.height=myframe.document.body.scrollHeight" ></iframe>

2.宽度

五.iframe 阻塞页面加载

及时触发 window 的 onload 事件是非常重要的。onload 事件触发使浏览器的 “忙” 指示器停止，告诉用户当前网页已经加载完毕。当 onload 事件加载延迟后，它给用户的感觉就是这个网页非常慢。window 的 onload 事件需要在所有 iframe 加载完毕后(包含里面的元素)才会触发。在 Safari 和 Chrome 里，通过 JavaScript 动态设置 iframe 的 SRC 可以避免这种阻塞情况。