本文编写于 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调用父页面方法](