事情是这样的
由于刚进typecho坑不久
加上在这方面完完全全就是0基础小白
所有的东西都是一边学一边做
整个国庆假期都是在谷歌百度q群中度过
倒也过得挺充实,好歹博客是开门接客了

昨天无意中发现南博app,卧槽太舒服了
再也不用进后台编辑了
把玩app的时候又发现动态这么个玩意
这不就是俗称的时光机功能吗
看到大神们的demo后惊为天人
简直不要太完美了
一个app就把博客和动态全管理起来
一扫之前写博客和发动态操作的割裂感带来的不适
啥也不说,我冲了
装好后发现,动态页面和我正在用的主题不能说不搭吧

简直就是两个毫不相关的东西
我当然希望这个动态页面可以和主题融合
又是好一顿谷歌百度github找教程
官方教程对于我这样没基础的人来说,等于没有
搜到吐也没搜到其他教程
正所谓世上无难事,只要肯放弃
一番天人交战后决定,放弃了

转身看到一个足迹地图还挺好玩的
就跟着教程也弄了一个

这个时候,一段iframe代码引起了我的注意
我心想,既然iframe可以将足迹地图嵌入到我的主题页面里
那动态页面不也可以这样操作吗?
这不就融合了吗?
说干就干,将足迹地图中的iframe代码扒过来试试

<div style="padding-bottom: 0%;width: 100%;position: relative;">
<iframe src="url"
      frameborder="no" 
      border="0" 
      scrolling="No"
      marginwidth="0" 
      marginheight="0" 
      width="100%" 
      height="1000px"
 ></iframe></div>

唔,开始有点内味了
但是同时我也发现了问题
由于代码中设定了高度为1000像素
但是实际情况肯定是不适用的
动态有长有短,或者发个图片什么的
固定高度就会导致效果页面中显示不全的情况
这就要求代码可以自动适应动态页面的长度然后嵌套进主题页面中
又是一番百度谷歌github,终于找到了一段代码

<iframe src="url"
           frameborder="0"
           scrolling="no"
           width="100%" 
           id="test" onload="this.height=100">
</iframe>
<script type="text/javascript">
function reinitIframe() {
    var iframe = document.getElementById("test");
    try{
        var bHeight = iframe.contentWindow.document.body.scrollHeight;
        var dHeight = iframe.contentWindow.document.documentElement.scrollHeight;
        var height = Math.max(bHeight, dHeight);
        iframe.height = height;
        console.log(height);
    } catch (ex) {}
}
window.setInterval("reinitIframe()", 200);
</script>

代码中<iframe src="url"里的url替换成想要嵌套的网址


部分常用参数
  name:内嵌帧名称
  width:内嵌帧宽度(可用像素值或百分比)
  height:内嵌帧高度(可用像素值或百分比)
  frameborder:内嵌帧边框
  marginwidth:帧内文本的左右页边距
  marginheight:帧内文本的上下页边距
  scrolling:是否出现滚动条(“auto”为自动,“yes”为显示,“no”为不显示)
  src:内嵌入文件的地址
  style:内嵌文档的样式(如设置文档背景等)
  allowtransparency:是否允许透明

说实话代码是啥意思我也不知道
但是效果是出来了

这个时候再把header和footer一些多余的内容删掉,再调整一下样式
虽然不能说100%融合,但也有个七八成了
起码看着也舒服多了


总结一下
这次属于多重巧合组合而成的强制学习
还是相当有收获的
熟悉iframe万物皆可套娃
还是挺好玩的
不过据说会影响seo
在意这个的就自己考虑吧
而且套多了页面卡顿会很明显
至于最后为什么不启用官方动态?
因为群友们告诉我
app其实也是可以在主题时光机中发动态的
我裂了,我特么通宵一宿白折腾了
算了,毁灭吧,累了


END

本文作者:
文章标题:记一次typecho动态iframe套娃经历
本文地址:https://kev.fit/archives/271/
版权说明:若无注明,本文皆K E V.原创,转载请保留文章出处。
最后修改:2021 年 10 月 07 日 12 : 55 AM
如果觉得我的文章对你有用,请随意赞赏