美文网首页
iframe跨域问题

iframe跨域问题

作者: 一名有马甲线的程序媛 | 来源:发表于2018-07-23 11:04 被阅读156次

最近遇到了一个闹心的问题,就是 调用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

相关文章

  • Web前后端跨域问题处理

    跨域问题有前台跨域(iframe间)和后台跨域。 前台跨域的解决方案可以采用跨域文档通讯(Cross domain...

  • Spring Boot使用CORS解决跨域问题

    一、跨域问题描述 Web开发经常会遇到跨域问题,解决方案有:jsonp,iframe,CORS等等。CORS 与 ...

  • iframe跨域问题

    最近遇到了一个闹心的问题,就是 调用iframe中的函数并获取返回值。 父级调用iframe方法: 子 Ifram...

  • iframe页面相互调用方法

    关键词:iframe,跨域,vue最近的项目中嵌入了外部的iframe,想跨域调用自己页面的方法,点击iframe...

  • iframe 跨域问题 iframe 跨域通信 postMes

    概述 JavaScript出于安全方面的考虑,不允许跨域调用其他页面的对象。但在安全限制的同时也给注入iframe...

  • Iframe高度自适应

    1. 同域iframe高度自适应 2. 跨域iframe高度自适应

  • 前端如何解决常见跨域问题

    跨域解决方案 1、 通过jsonp跨域 2、 document.domain + iframe跨域 3、 loca...

  • PHP跨域问题

    使用iframe方式实现局部刷新,但是iframe不支持跨域 通过script方式,src属性可以实现跨域,但只能...

  • 2019-03-31 iframe 子页面 postMessag

    参考链接:使用 postMessage 解决 iframe 跨域通信问题 iframePage.html是inde...

  • iframe -- postMessage

    之前一提到跨域,都是前端到后台的问题. 其实,在网页中嵌套非同源的iframe也存在跨域的问题. 比如,在你自己的...

网友评论

      本文标题:iframe跨域问题

      本文链接:https://www.haomeiwen.com/subject/elvdmftx.html