【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>只用于局部;