iframe框架

本文针对HTML内联框架元素 (<iframe>)进行讲解

Hexo 是静态网页渲染工具，有些情况我们想要动态网页，那么可以采用iframe框架嵌套另一个HTML实现一种伪动态网页的效果，例如，我们这里嵌入一个谷歌地图：

<p align="center">
<iframe id="inlineFrameExample"
    title="Inline Frame Example"
    width="300"
    height="200"
    src="https://www.openstreetmap.org/export/embed.html?bbox=-0.004017949104309083%2C51.47612752641776%2C0.00030577182769775396%2C51.478569861898606&layer=mapnik">
</iframe>
</p>

属性

allow：用于为iframe指定特征策略

嵌入自定义网页

在source文件夹下创建保存网页的文件夹

我们在source文件夹下创建一个webs文件夹，专门用于保存自定义的网页。

跳过网页渲染

为了使我们能够正确嵌入自定义网页，我们需要跳过自定义网页的渲染，方式如下，在_config.yml下添加不需要渲染的网页的相对路径：

1 2	skip_render: - webs\helloworld\clock.html

插入自定义网页

插入自定义网页的代码如下：

<p>
    <div style="width:100%; height:350px;border:none;text-align:center">
        <iframe allowtransparency="yes" frameborder="0" width="300" height="300" src="/webs/helloworld/clock.html"/>
    </div>
</p>

其中，src即为网页在source文件夹下的路径，style中的height和width为分配给网页的大小，而iframe中的width和height是网页的实际大小，使用时应保证分配大小大于实际大小

这里插入一个HTML的时钟作为展示：

参考文献

1.iframe ↩