关于框架标签的整理汇总

来源：互联网发布：js如何获取当前时间编辑：程序博客网时间：2024/06/15 18:19

框架主要分为<frameset>和<iframe>两种，其中<frameset>在新的html5标准中已经不再使用，因此在<!doctype>中声明html就无法查看<frameset>效果。<iframe>的属性在html4和html5两个版本当中相差较大，文章末尾会给出总结。

`<frameset>`

注意：<frameset>和<body>不能同时存在

定义一个两列的框架

<frameset cols="50%,50%"><frame src="http://www.baidu.com"><frame src="http://www.sina.com.cn"></frameset>

定义一个两行的框架

<frameset rows="50%,50%"><frame src="http://www.baidu.com"><frame src="http://www.sina.com.cn"></frameset>

定义一个复杂的框架

<frameset cols="25%,25%,25%"><frame src="http://www.baidu.com">    <frameset rows="50%,50%">    <frame src="http://www.qq.com">    <frame src="http://www.sina.com.cn">    </frameset><frame src="http://www.163.com"></frameset>

如何在不支持<frameset>的浏览器中提示用户
在不支持<frameset>浏览器中显示提示内容，需要用到<noframeset>标签，必须将<body>标签放置于<noframeset>标签之中

<frameset cols="25%,25%,25%"><noframeset><body><p>你的浏览器不支持frameset</p></body></noframeset><frame src="http://www.baidu.com"><frame src="http://www.163.com"><frame src="http://www.qq.com"></frameset>

`<frameset>`属性

rows 定义框架有几行
cols 定义框架有几列
rows和cols是必须属性
noresize 规定框架的边框是否可以移动

<frameset cols="25%,25%,25%"><frame src="http://www.baidu.com" noresize="noresize"><frame src="http://www.google.jp"><frame src="http://www.sina.com.cn"></frameset>

`<Iframe>`

iframe定义一个内联框架

<iframe src="http://www.baidu.com"><p>如果浏览器不支持iframe，这段文字就会显示出来</p></iframe>

`<ifram>`属性

sandbox 对iframe的内容定义限制，有五个值
- allow-script 允许脚本执行
- allow-forms 允许表单提交
- allow-top-navigation 允许从导航加载内容
- allow-same-origin 允许内容作为普通的源来对待
- “”以上情况都不允许

<iframe src="http://www.w3school.com.cn/demo/demo_iframe_sandbox_form.html" sandbox="">  <p>Your browser does not support iframes.</p></iframe><!--如果上述sandbox的值改为allow-forms，则iframe中的内容就可以提交至服务器--><!--sandbox是h5新增属性-->

sameless 使iframe的内容和文档无缝衔接
sameless属性替代了html4的iframeborder和scroling

<iframe src="http://www.baidu.com" seamless></iframe><!--sameless是h5新增属性-->

srcdoc 规定显示的内容
如下例的逻辑，如果浏览器支持srcdoc，且指定了srcdoc的内容，则最终显示srcdoc的内容；如果浏览器不支持srcdoc，且指定了srcdoc的内容，则最终显示src的内容。

<iframe srcdoc="<p>Hello world!</p>" src="demo-iframe_srcdoc.htm">  <p>您的浏览器不支持iframe标签。</p></iframe><!--srcdoc是h5新增属性-->

iframeborder 是否显示框架的边框

<iframe src="http://www.baidu.com/" width="200" height="200" frameborder="0/1"><p>如果浏览器不支持iframe，这段文字就会显示出来</p></iframe><!--注意这里的值是0和1，0代表没有边框，1代表有边框--><!--iframeborder不支持h5-->

marginheight和marginwidth
规定框架内容的上下左右距离，和css中margin的意义类似

<iframe src="demo_iframe.htm" marginheight="50" marginwidth="50">  <p>Your browser does not support iframes.</p></iframe><!--marginheight和marginwidth不支持h5-->

scrolling 是否显示框架的滚动条

<p>显示滚动条的 iframe:</p><iframe src="/" width="200" height="200" scrolling="yes">   <p>您的浏览器不支持  iframe 标签。</p></iframe><p>没有滚动条的 iframe :</p><iframe src="/" width="200" height="200" scrolling="no">   <p>您的浏览器不支持  iframe 标签。</p></iframe><!--scroling不支持h5-->

name
略
src
略
width和height
略

总结

在html4中<iframe>标签的属性有iframeborder、marginheight、marginwidth、scrolling
在html5中<iframe>标签的属性有sandbox、sameless、srcdoc
两个版本都通用的属性有name、src、width和height

0 0

关于框架标签的整理汇总

<frameset>

<frameset>属性

<Iframe>

<ifram>属性

总结

`<frameset>`

`<frameset>`属性

`<Iframe>`

`<ifram>`属性