关于框架标签的整理汇总

最新推荐文章于 2021-06-10 13:17:07 发布

阿斯卡Asika

最新推荐文章于 2021-06-10 13:17:07 发布

阅读量489

点赞数

分类专栏： html 文章标签： html 框架

本文链接：https://blog.csdn.net/sipallan/article/details/51234597

版权

html 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

框架主要分为<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