Why

在一些业务中,我们可能需要用到 iframe 来实现一些特定的需求,而如何在页面中嵌入 iframe 页面?通过本文,我们将稍加了解,至于为何强调了优雅?主要由于内嵌页面可能会在展示上有点突兀。对此,本文也进行了一些尝试,如去边框等。

What

iframe ? HTML内联框架元素() 表示嵌套的 browsing context。它能够将另一个HTML页面嵌入到当前页面中。

具体,可参考:https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/iframe

How

基本使用

使用 iframe 标签,可将另一 HTML页面内嵌于当前页面中,基本使用示例如下:

<iframe src="./main.html"></iframe>

<iframe id="mainIframe" name="mainIframe" src="http://www.baidu.com" frameborder="0" scrolling="auto" ></iframe>

以下列举了一些 iframe 常用属性: | 属性 | 值 | 描述 | | ————– | ————- | —————————————— | | src | URL | 定义 iframe 中显示的文档的 URL | | width | pixels % | 定义 iframe 的宽度 | | height | pixels % | 定义 iframe 的高度 | | name | frame_name | 定义 iframe 的名称 | | frameborder |1 0 | 规定是否显示框架周围的边框 | | marginheight |pixels | 定义 iframe 的顶部和底部的边距。 | | marginwidth |pixels | 定义 iframe 的左侧和右侧的边距 | | scrolling |yes no auto | 规定是否在 iframe 中显示滚动条 | | srcdoc (HTML5) | HTML_code | 定义在 中显示的页面的 HTML 内容。 | | sandbox (HTML5) | "” allow-form sallow-same-origin allow-scripts allow-top-navigation | 启用一系列对 中内容的额外限制 |

显示处理

通常我们需要对内嵌的 iframe 页面做一些样式上的调整,如下例:

iframe_ex1
iframe_ex1

借用 w3school 代码沙箱,我们尝试内嵌 wap.baidu 页面,调整了了高度、宽度,并将边框去除

iframe_ex3
iframe_ex3

处理过后,基本上和我们的页面融为一体了,如果不查看 html 源码,并不会注意到是通过 iframe 内嵌的。

其他问题

跨域

iframe 间可能存在跨域问题,如何实现 iframe 间通信以及一些相关问题?

这个问题与本文主要讨论的有点偏离,可参考 iframe跨域的几种常用方法 加以了解。

参考

更多 iframe 相关内容,可参考: