本文编写于 1231 天前,最后修改于 1231 天前,其中某些信息可能已经过时。

如何在typecho里加入单独的自定义内容?

想了好久,想了加script,想了首次加载的时候jquery,想了很多,没想到。。。

先展示一个demo

实现方法

最近在别的博客那里看到有位大佬在自定义页面加了一个“舔狗日记”的小窗口,觉得十分好玩,遂很好奇他是怎么做到在自定义页面里插入这个H5的

F12 后发现,iframe原来是可以用的

那之前想的用script啥的,的确就很傻了😄

iframe的常用属性

<iframe>标签包裹后,这些属性为常用属性

  • name : 规定 <iframe> 的名称。
    • width: 规定 <iframe> 的宽度。
    • height:规定 <iframe> 的高度。
    • src :规定在 <iframe> 中显示的文档的 URL。
    • frameborder : 规定是否显示 <iframe> 周围的边框。 (0为无边框,1位有边框)。
    • align :  规定如何根据周围的元素来对齐 <iframe>。 (left,right,top,middle,bottom)。
    • scrolling : 规定是否在 <iframe> 中显示滚动条。 (yes,no,auto)

获取iframe里面的内容

var iframe = document.getElementById("myframe"); //获取iframe标签
var iwindow = iframe.contentWindow; //获取iframe的window对象
var idoc = iwindow.document; //获取iframe的document对象
console.log(idoc.documentElement); //获取iframe的html
console.log("body",idoc.body);

获取iframe中的Dom元素

var ifr = document.getElementById("myframe2");
var dom=  ifr.contentWindow.document.getElementById("textid")

然后就可以操作内部的dom了

如果是内部iframe操作父级内容,可以这么操作

var par1 = window.parent.document.getElementById("div")//vanilla js
var par2 = window.parent.$("div")//jquery

参考资料

  1. js 获取iframe内dom元素

  2. 原生js获取iframe中dom元素--父子页面相互获取对方dom元素的方法

  3. iframe访问父级页面、子级页面

  4. [iframe调用父页面方法](