iframe跨域问题

最近遇到了一个闹心的问题，就是 调用iframe中的函数并获取返回值。

父级调用iframe方法：

document.getElementById("iframe").contentWindow.func(data1,data2...);

子 Iframe 中 调用 父html中方法：

parent.func(data1,data2...)

但这个方法的前提条件是要在同域名下，想要如果域名不同，甚至端口不同，都会存在 跨域 的问题。

---

那怎么解决 跨域 的问题呢？百度了很多方法，发现有两个是很好用的：

法一：建立一个中间页，来解决父子间跨域问题

照着文档可以做出demo，这里就不贴实例代码了，原理是在父级页面上自动生成一个隐藏的iframe，与子集同域，这样新生成的iframe与子集就不会存在跨域的问题了，父级再根据dom获取同页面的iframe，就搞定了~

法二：用window.postMessage方法

父:

<iframe src="http://127.0.0.1:9090/child.html" frameborder="0" id="childFrame"></iframe>

  <button onclick="call('back',123)">btn1</button>
  <button onclick="call('roi',456)">btn2</button>
  <script>
    function call (val,str) {
      var iframe = document.getElementById('childFrame').contentWindow;
      var childDomain = 'http://127.0.0.1:9090';
      iframe.postMessage({type:val,seriesIndex:str}, childDomain);
    }

    window.addEventListener('message', function(obj) {
      console.log('获取子集函数返回值')
      console.log(obj.data);
    })

  </script>

子:

obj是父传过去的对象，type:back/roi , id:seriesIndex，callbackStr是子给父的返回值，下面的地址是父的域名

<script>
    window.addEventListener('message', function(obj) {
      var callbackStr;
      if (obj.data.type == 'back') {
        callbackStr = getSNRBackValueNow(obj.data.seriesIndex);
      }else {
        callbackStr = getSNRROIValueNow(obj.data.seriesIndex);
      }
      window.parent.postMessage(callbackStr, 'http://127.0.0.1:8080');
    })
    function getSNRBackValueNow (val) {
      return 'fn1:' + val
    }
    function getSNRROIValueNow (val) {
      return 'fn2:' + val
    }
  </script>

点击下载demo