【Javaweb】html frame标签的使用 | 导航栏右侧内容的实现

问题的产生：

是我和同伴做了一个导航栏，但是我们不知道怎么实现右侧内容的切换

然后我们查了很多资料，但是有一些是垂直的，但是就如图可见，我们是水平的，那么怎么实现水平切换呢？

上网看到了frame标签，于是我们想试一试。

标签详解

示例

<iframe src="http://www.w3school.com.cn" name="iframe_a" width="800dx" height="800dx">

  <p>Your browser does not support iframes.</p>

</iframe>

这里说明一下src的地址，注意相对路径和绝对路径

我需要它显示在导航栏右端，这里我们科普一些我用到的属性

属性

height 属性

规定 iframe 的高度

<iframe src ="http://www.w3school.com.cn" width="400px" height="500px">

marginheight 属性

规定iframe 的顶部和底部的空白边距，以像素计

<iframe src ="http://www.w3school.com.cn" marginheight="50px" width="400px" height="300px">

marginwidth 属性

规定 iframe 的左边和右边的空白编剧，以像素计

<iframe src ="" marginwidth="50px"width="400px" height="300px">

name 属性

规定 iframe 的名称，iframe 元素的 name 属性用于在 JavaScript 中引用元素，或者作为链接的目标；

<iframe src="/example/html/demo_iframe.html" name="iframe_a">

  <p>Your browser does not support iframes.</p>

</iframe>

<a href="http://www.w3school.com.cn" target="iframe_a">W3School.com.cn</a>

sandbox 属性

如果被规定为空字符串（sandbox=""），sandbox 属性将会启用一系列对行内框架中内容的额外限制，sandbox 属性的值既可以是一个空字符串（应用所有的限制），也可以是空格分隔的预定义值列表（将移除特定的限制）

allow-forms：允许表单提交；

allow-scripts：允许脚本执行；

<iframe src="/demo/demo_iframe_sandbox.html" sandbox="">

  <p>Your browser does not support iframes.</p>

</iframe>

<p>由于 sandbox 属性被设置为空字符串 ("")，行内框架的内容不允许运行脚本。</p>

<p>如果向 sandbox 属性添加 "allow-scripts"，则允许运行 JavaScript。</p>

scrolling 属性

是否在iframe中显示滚动条，默认的，如果内容超出了iframe，滚动条就会出现在iframe中

auto：在需要的情况下出现滚动条（默认值）；
yes：始终显示滚动条（即使不需要）；
no：从不显示滚动条（即使需要）；

<h3>iframe 中始终显示滚动条：</h3>

<iframe src ="/index.html" width="200" height="200" scrolling="yes">

  <p>Your browser does not support iframes.</p>

</iframe>

<h3>iframe 中从不显示滚动条：</h3>

<iframe src ="/index.html" width="200" height="200" scrolling="no">

  <p>Your browser does not support iframes.</p>

</iframe>

seamless 属性

属于逻辑属性，当设置该属性后，它规定了 <iframe> 看上去像是包含文档的一部分（无边框或滚动条）

<p>这是一个段落。</p>

<iframe src="/demo/demo_iframe.html" seamless></iframe>

<p><b>注释：</b>Opera、Chrome 以及 Safari 支持 seamless 属性。</p>

src 属性

规定在iframe 中显示的文档URL

<iframe src ="/index.html">

  <p>Your browser does not support iframes.</p>

srcdoc 属性

规定页面的 HTML 内容显示在行内框架中，该属性与 sandbox 和 seamless 属性一同使用，如果浏览器不支持 srcdoc 属性，则相应地会显示在 src 属性（若已设置）中规定的文件

<iframe srcdoc="<p>Hello world!</p>" src="iframe.html">

  <p>Your browser does not support iframes.</p>

</iframe>

<p><b>注释：</b>所有主流浏览器都支持 srcdoc 属性，除了 Internet Explorer。</p>

width 属性

规定iframe 宽度

iframe的基本特性

通常使用iframe最基本的特性，就是能自由操作iframe和父框架的内容（DOM），但前提条件是同域，如果跨域顶多只能实现页面跳转window.location.href;

<iframe id="mainIframe" name="mainIframe" src="homePage.html" frameborder="0" scrolling="auto" ></iframe>
<iframe id="mainIframe" name="mainIframe" src="http://www.w3school.com.cn" frameborder="0" scrolling="auto" ></iframe>

使用第一个的时候，因为同域，所以父页面可以对子页面进行改写，反之亦然】

使用第二个的时候，不同域，父页面没有权限改动子页面，但可以实现页面的跳转

获取iframe里的内容

　 iframe.contentWindow：获取iframe的window对象；
iframe.contentDocument：获取iframe的document对象；
这两个API只是DOM节点提供的方式(即getELement系列对象)

常用的配置项有

allow-forms	允许进行提交表单
allow-scripts	运行执行脚本
allow-same-origin	允许同域请求,比如ajax,storage
allow-top-navigation	允许iframe能够主导window.top进行页面跳转
allow-popups	允许iframe中弹出新窗口,比如,window.open,target="_blank"
allow-pointer-lock	在iframe中可以锁定鼠标，主要和鼠标锁定有关

frameset 和 iframe的区别

1、都用于html页面的框架布局

2、 iframe是内联框架，是在页面里生成个内部框架

　　frameset定义一个框架集，包含多个子框架，每个框架都有独立的文档，frame不能脱离frameset独立使用，iframe可以，frame不能放在body中

// 如下可以正常显示

<!--<body>-->

<frameset rows="50%,*">

   <frame   name="frame1"   src="test1.htm"/>

   <frame   name="frame2"   src="test2.htm"/>

</frameset>

<!--<body>--> 

// 如下不能正常显示：

<body>

<frameset rows="50%,*">

   <frame   name="frame1"   src="test1.htm"/>

   <frame   name="frame2"   src="test2.htm"/>

</frameset>

<body>

嵌套在frameset中的iframe必须放在body中

// 如下可以正常显示：

<body>

<frameset>

<iframe name="frame1" src="test1.htm"/>

<iframe name="frame2" src="test2.htm"/>

</frameset>

</body>

// 如下不能正常显示：

<!--<body>-->

<frameset>

<iframe name="frame1" src="test1.htm"/>

<iframe name="frame2" src="test2.htm"/>

</frameset>

<!--</body>-->

不嵌套在frameset中的iframe可以随意使用

// 如下均可以正常显示：

<body>

<iframe name="frame1" src="test1.htm"/>

<iframe name="frame2" src="test2.htm"/>

</body>

<!--<body>-->

<iframe name="frame1" src="test1.htm"/>

<iframe name="frame2" src="test2.htm"/>

<!--</body>-->

frame的高度只能通过frameset控制，iframe可以自己控制，不能用过farmeset控制

<!--<body>-->

<frameset rows="50%,*">

<frame name="frame1" src="test1.htm"/>

<frame name="frame2" src="test2.htm"/>

</frameset>

<!--</body>-->

<body>

<frameset>

<iframe height="30%" name="frame1" src="test1.htm"/>

<iframe height="100" name="frame2" src="test2.htm"/>

</frameset>

</body>

iframe可以放在表格里面，frame则不行

<table>

 <tr>

   <td><iframe id="" src=""></iframe></td><td></td>

 </tr>

</table>

frame必须在frameset里，而frameset不能与body元素共存，也就说有frameset元素的文档只能是一个框架集，不能有别的东西；
iframe放在网页的什么地方都行，但是frame只能放到上下左右四个方向；
iframe是活动帧，而frame是非活动帧

因此，iframe可以放在表格里，然后iframe设置成width=100%，height=100%，这样就可以只修改表格的宽度和高度，有利于排版

<frame>用于全页面；
<iframe>只用于局部；