LOGO OA教程 ERP教程 模切知识交流 PMS教程 CRM教程 开发文档 其他文档  
 
网站管理员

HTML 21 天入门:框架

admin
2024年10月19日 22:13 本文热度 225

框架元素 iframe 是一个 inline-block 元素。还记得 inline-block 元素的特点吗?如果不记得去复习一下区块元素

介绍

通过框架元素,我们可以在一个浏览器窗口显示多个页面。

简单来说,就是把另一个页面嵌入到当前页面。

比如说在 a.html 页面显示,嵌入 b.html 页面。这里的 b.html 页面,可以是自己网站的,也可以是互联网上其它网站的页面。

显示自己网站其它页面

<iframe src="2-8-1.html"></iframe> 

可以看到,通过框架元素,我们把前一节的页面,显示在了框架里。

显示其它网站页面

<iframe src="https://movie.douban.com/top250?start=0&filter="></iframe> 

同样的,我们可以使用框架元素,嵌入其它网站页面。这里拿豆瓣的某个页面做一个示例。

样式

默认的框架样式,是可以修改的。

设置高度与宽度

<iframe src="2-8-1.html" width="600" height="400"></iframe> 

通过属性 width 和 height,我们可以指定边框的宽度和高度。

当内容宽度和高度小于框架时,滚动条默认就不显示了。

边框

<iframe src="2-8-1.html" width="600" height="400" frameborder="0"></iframe> 

通过 frameborder 属性,去掉了框架的边框,这样的嵌入看起来和当前网页一样,基本上看不出来是另一个页面,这为整体页面的样式和风格提供很好的融合。

使用框架显示链接网页内容

前面在讲 a 标签时,说过 a 标签的属性 target 用于指定当点击了链接时,链接内容显示在什么地方。

之前讲了两种,默认在当前窗口打开,通过指定值为_blank 会在新页面打开。

这里我们有另一个选项,通过指定值为 iframe 元素的 name,可以在当前页面的框架区域打开。

<a href="2-8-1.html" target="contentcontainer"   >点击在iframe中打开页面2-8-1.html</a > <iframe name="contentcontainer" src="" width="600" height="400"></iframe> 

上述代码默认展示为下

当点击了链接之后,显示如下:

可以看到原本应该在浏览器窗口打开的网页,在框架里打开了。

拒绝网页被嵌入框架

前面咱们在自己的网页中嵌入了豆瓣的某个网页,那如果豆瓣不希望其它人通过这种方便嵌入它的网页,能实现吗?

答案是肯定的,只是这实现不能直接在 html 页面里,而且需要通过在 http 请求的 header 里指定属性 X-Frame-Options 的值。

它有两个值可选 DENY 和 SAMEORIGIN,当值 被指定为 DENY 时,这个网页就不能被当前网站之外的其它网站嵌入到 iframe 中。

由于此部分内容涉及到 HTTP 请求,在这里不展开细说,作为对于 iframe 元素的了解,大家知道我们有办法能不让其它站点引用就可以了。

总结

  • 🍑 iframe 是一个 inline-block 元素,可以通过 自身的属性以及 CSS 指定样式。

  • 🍑 iframe 可以嵌入当前站点的网页,也可以嵌入其它站点的网页。

  • 🍑 iframe 可以作为链接的目标显示区域,打开链接指定的地址页面。


该文章在 2024/10/22 12:25:52 编辑过
关键字查询
相关文章
正在查询...
点晴ERP是一款针对中小制造业的专业生产管理软件系统,系统成熟度和易用性得到了国内大量中小企业的青睐。
点晴PMS码头管理系统主要针对港口码头集装箱与散货日常运作、调度、堆场、车队、财务费用、相关报表等业务管理,结合码头的业务特点,围绕调度、堆场作业而开发的。集技术的先进性、管理的有效性于一体,是物流码头及其他港口类企业的高效ERP管理信息系统。
点晴WMS仓储管理系统提供了货物产品管理,销售管理,采购管理,仓储管理,仓库管理,保质期管理,货位管理,库位管理,生产管理,WMS管理系统,标签打印,条形码,二维码管理,批号管理软件。
点晴免费OA是一款软件和通用服务都免费,不限功能、不限时间、不限用户的免费OA协同办公管理系统。
Copyright 2010-2024 ClickSun All Rights Reserved