问题的产生：
是我和同伴做了一个导航栏，但是我们不知道怎么实现右侧内容的切换
然后我们查了很多资料，但是有一些是垂直的，但是就如图可见，我们是水平的，那么怎么实现水平切换呢？
上网看到了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>只用于局部；
标签：frameset,Javaweb,allow,frame,html,iframe,页面,属性 From： https://www.cnblogs.com/gbrr/p/17245485.html