526互联

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

发布时间 2023-03-22 21:22:13作者: 喝着农药吐泡泡o

问题的产生：

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

 

 

 

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

上网看到了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>只用于局部；