入坑

起源是使用vue的ssr框架nuxt.js中遇到的需求，在要求seo的情况下，使用了此框架，但是需求是需要加载第三方或者自己写的html文件。但是需要使用共同的导航条和页脚。由于不能使用组件化，所以想到了iframe嵌入的解决方案。

本地页面

因为nuxt.js架构中可以直接访问static文件中的静态文件，所以我就把静态文件放入到了这个文件夹，然后也实现了嵌入的功能，主要的处理就是嵌入页面自适应网页的高度，简单处理代码如下：

html

  1.  <iframe
  2.       id="external-frame"
  3.       class="content"
  4.       :src="`XXXX/htmls/${title}.html`"
  5.       scrolling="no"
  6.       frameborder="0"
  7.     ></iframe>

js

  1. mounted() {
  2.     document.domain = 'XXXX.com'
  3.     setInterval(this.setHight(document.getElementById('external-frame')), 100)
  4.   },
  5.   computed: {},
  6.   methods: {
  7.     setHight(iframe) {
  8.       if (iframe) {
  9.         var iframeWin =
  10.           iframe.contentWindow || iframe.contentDocument.parentWindow
  11.         if (iframeWin.document.body) {
  12.           iframe.height =
  13.             iframeWin.document.documentElement.scrollHeight ||
  14.             iframeWin.document.body.scrollHeight
  15.         }
  16.         console.log(
  17.           'iframe',
  18.           iframe.contentWindow || iframe.contentDocument.parentWindow,
  19.           iframeWin.document.documentElement.scrollHeight ||
  20.             iframeWin.document.body.scrollHeight
  21.         )
  22.       }
  23.     }
  24.   }

定义一个iframe，然后获取到加载完成的dom的高度，然后在更改页面高度来完成自适应。这样的处理没有什么问题。

出现跨域问题

在使用本项目文件夹中的代码的时候，没有出现任何问题，但是当把静态文件换成oss存储的html文件路径之后，就出现了，文件加载成功，但是页面的高度不能够设置成自适应。打开控制台，发现了报错，提示信息为跨域问题。此处的跨域是由于二级域名不一样，所以也比较好解决，然后找了解决方式，记录一下：

  1. 设置domain

主要适用于主域相同，子域不同。在两个页面中设置document.domain=主域名

  1. postmessage

window.postMessage方法可以安全地实现跨源通信，写明目标窗口的协议、主机地址或端口就可以发信息给它。

  1. // b页面
  2. parent.postMessage(
  3.  value,
  4.  "http://a.demo.com"
  5. );
  6. // a页面
  7. window.addEventListener("message", function( event ) {
  8.  if (event.origin !== 'http://b.demo.com') return;
  9.  toggleFullScreen()
  10.  });

总结

通过以上的方法，我们就可以和iframe自由通信，这是我觉得比较好得方法，有其他方法，我在添加上