有时候，需要文章内嵌入网页来展示一些内容。


不仅是html界面，普通的网页，b站视频啥的都可以用iframe嵌入到文章中。

注意，本文内容仅针对typecho使用handsome主题，其他博客或者主题可能不会生效。

如果网页使用iframe过多可能会极大的拖慢你网站的加载速度，甚至让客户无法访问。比如这个教程就嵌入了五个iframe,已经卡的受不了。

举个例子

例如我的这个文章

typecho外链转内链

虽然我也不知道有什么具体用处，但是据说有利于 SEO，我就尝试鼓捣了一下。最终效果就是这样，点击前往GitHub下...

直接使用iframe虽然在桌面端显示正常，但在移动端就会超出界限。
例如下面的写法：

<iframe src="https://pan.wnark.com/api/v3/file/get/13/go.html?sign=z6GxbnkMlNuLLhwAUtV--f5jw17YI4AAbOtxoiQBpnw%3D%3A0" frameborder="0" width="600" scrolling="No" height="400" zoom:"50%"=""></iframe>

在移动端会超出设备界限。
直接强行100%平铺的话拿整个文章只能显示一个，完全不符合需求。
所以，ucw大佬建议参考这个教程，在外面套一个div
即如下所示：

三个感叹号
<div style="padding-bottom: 56.25%;width: 100%;position: relative;"><iframe src="https://ax9advmduxh0.compat.objectstorage.us-phoenix-1.oraclecloud.com/US/%E7%BD%91%E7%AB%99%E6%96%87%E4%BB%B6/%E8%B7%B3%E8%BD%AC%E7%95%8C%E9%9D%A2/%E7%9F%AD%E9%93%BE%E6%8E%A5%E8%B7%B3%E8%BD%AC/go.html" frameborder="0" width="600" scrolling="No" height="400" style="position: absolute;width: 100%;height: 100%;"></iframe></div>
三个感叹号

效果入下：

之所以加三感叹号是因为要启用特权模式，不启用特权模式有些参数就无法加载。有点奇怪，单独使用iframe可以解析出来。

拓展

修改iframe内的内容还可以嵌入其他的都行，比如探针，或者是b站视频。

探针

这个是轻风伴梦的探针，我借用下。

把scrolling="No"（禁用滚动）参数删掉，探针就能上下滑动了

代码如下：

三个感叹号
<div style="padding-bottom: 56.25%;width: 100%;position: relative;"><iframe src="https://status.imcxx.com/" frameborder="0" width="600"  height="400" style="position: absolute;width: 100%;height: 100%;"></iframe></div>
三个感叹号

b站视频

嵌入的视频：https://www.bilibili.com/video/av57983137

代码如下：

三个感叹号
<div style="padding-bottom: 56.25%;width: 100%;position: relative;"><iframe src="//player.bilibili.com/player.html?aid=57983137&cid=101179001&page=1" frameborder="0" width="600" scrolling="No" height="400" style="position: absolute;width: 100%;height: 100%;"></iframe></div>
三个感叹号

疫情地图

代码如下：

三个感叹号
<div style="padding-bottom: 100%;width: 100%;position: relative;"><iframe src="https://ncov.dxy.cn/ncovh5/view/pneumonia" frameborder="0"  style="position: absolute;width: 100%;height: 100%;"></iframe></div>
三个感叹号

我修改了padding-bottom: 100%参数，删除了width="600" scrolling="No" height="400"

网盘

代码如下：

三个感叹号
<div style="padding-bottom: 100%;width: 100%;position: relative;"><iframe src="https://ct.imcxx.com/" frameborder="0"  style="position: absolute;width: 100%;height: 100%;"></iframe></div>
三个感叹号

参考了上面疫情地图

总结一下

typecho配合handsome后的编辑器，使用特权模式后还是挺强大的，我没使用过其他主题，不知道这个教程在其他主题下表现怎么样。
歪打正着的是，这个也解决了我在typecho的文章内嵌入b站视频的需求。网上搜到的教程都TM是互抄的，压根不能用还信誓旦旦的保证可以用。
这个方法也不用自定义css啥的，挺好。
再次感谢UCW大神，大家没事可以去他的博客朝圣下，233.

版权属于：寒夜方舟

本文链接：https://www.wnark.com/archives/56.html

本站所有原创文章采用署名-非商业性使用 4.0 国际 (CC BY-NC 4.0)。 您可以自由地转载和修改，但请注明引用文章来源和不可用于商业目的。声明：本博客完全禁止任何商业类网站转载，包括但不限于CSDN，51CTO，百度文库，360DOC，AcFun，哔哩哔哩等网站。

最后修改：2021 年 01 月 13 日
© 允许规范转载
如果觉得我的文章对你有用，请随意赞赏