折腾：在 Hexo 的 page 中嵌入 iframe

周末没事就把之前的一键给证件照片打水印的那个小工具更新了一下。因为我平时也要用，而自从上次将博客又从 Ghost 迁回 Hexo 后，这些小工具就一直没空迁过来。这周末得空，就把这个给迁移一下，顺便又更新了一下，要不每次自己在 PS 里搞水印总是有种杀鸡用牛刀的感觉。

Hexo 跟 Ghost 的区别还是挺大的（那不废话嘛，一静一动能不大嘛）。在 Ghost 里我能直接在 page 页里写完整 HTML 代码，嗯，HTML 的所有标签都能用。而在 Hexo 里，不知道是渲染机制的问题还是怎么滴，之前在 Ghost 里用的那种方式不能用，只好曲线一下了。

本文就记录一下这个曲线的过程，以免以后我又忘了。

这次在打水印的这个小工具上增加了简单的图片编辑功能，裁剪、缩放、旋转什么的，以我这前端小白的水平，只好借助框架和第三方包来搞定了。我只会用 Vue，所以也没得选。

在将原来的 html、js 代码整理到 vue 中后，在本地预览发现还是 very nice 的。因为想直接嵌入到 Hexo 的 page 页面上，所以也没什么 header footer 的样式，简单粗暴。

那就 build 出来吧，看似一切顺利了。把 index.html 里的内容删减一些贴到 index.md 中，把 js css 放到静态目录。但是启动 Hexo 后并没有出现预期效果。

这时注意到终端中编译完成后的一条提示

Tip: built files are meant to be served over an HTTP server.
Opening index.html over file:// won't work.

但是之前我的书单也是类似的方式做的，为啥它就可以呢？难道是这次我引入第三方的东西多了？虽然百思不得姐，我还是决定用 caddy 来反代尝试一下。

caddy 是一个类似 nginx 的工具，不过配置文件要简单许多 ，默认监听 2015 端口（15 年出道？）

:2015 {
    root /Users/yibo/vuejs/watermark/dist
}

上边的配置就是一个简单的 Caddyfile 的配置，直接访问 localhost:2015 就能打开我刚刚编译好的文件，一切 OK。

但是这样我怎么能把它搞到 Hexo 的页面上呢？我可不想写一个完整的页面（主要还是技术菜），苦思冥想我突然想到之前浏览过的某些网页，直接把人家网站的内容嵌入到了他自己的网页上——嗯，臭名昭著的 iframe 好像可以实现我的这个需求。

iframe 用起来挺简单，就像这样

<iframe width="100%" scrolling=no height="800" frameborder="0" src="http://localhost:2015"></iframe>

将这段代码放到对应的页面里，确实可以正常拉取到内容了。不过还有个问题，高度。我想让 iframe 的高度自适应其内容。

这里就涉及到跨域问题了，因为我的内容都是自己控制的，并且位于同一域名下，所以解决起来也方便些。

首先本地/etc/hosts里伪造个域名指向本地，然后修改 Caddyfile

yibo-local.com {
    tls off
    proxy / http://localhost:4000
}

yibo-local.com/iframe-watermark {
    tls off
    root /Users/yibo/vuejs/watermark/dist
}

iframe 自适应高度的代码如下

<script type="text/javascript">
function SetCwinHeight(){
  var iframeid = document.getElementById("iframeid"); //iframe id
  if (document.getElementById) {
    if (iframeid && !window.opera) {
      if (iframeid.contentDocument && iframeid.contentDocument.body.offsetHeight) {
        iframeid.height = iframeid.contentDocument.body.offsetHeight + 50;
      } else if (iframeid.Document && iframeid.Document.body.scrollHeight) {
        frameid.height = iframeid.Document.body.scrollHeight + 50;
      }
    }
  }
}
</script>

<iframe width="100%" id="iframeid" onload="Javascript:SetCwinHeight()" scrolling=no height="1000" frameborder="0" src="https://www.haoyizebo.com/iframe-watermark/"></iframe>

至此就能正常访问了，效果嘛可以看这里

iframe 还是挺简单的，也有些不完美的地方（弹框遮罩），等以后我再学习学习前端的技术再来解决吧。也希望各位前端大神走过路过的时候能顺便给些指导，谢谢 la~