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


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

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

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

举个例子

例如我的这个文章


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

<iframe src="https://objectstorage.us-phoenix-1.oraclecloud.com/n/ax9advmduxh0/b/US/o/go.html" 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://objectstorage.us-phoenix-1.oraclecloud.com/n/ax9advmduxh0/b/US/o/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.

最后修改:2020 年 02 月 09 日 10 : 25 PM