跨域下调用iframe里面的方法并返回值

最新推荐文章于 2021-06-19 10:54:51 发布

Tetai

最新推荐文章于 2021-06-19 10:54:51 发布

阅读量1.5k

点赞数

本文链接：https://blog.csdn.net/TetaiSon/article/details/88225748

版权

一个域：9080，一个域：8082

思路：在8082端口创建一个代理页面，在9080端口直接使用iframe访问这个代理页面，这个代理页面再调用8082的功能方法。再9080端口也创建一个代理页面，8082的功能方法执行结束之后调用9080这个代理页面，并把值传到9080的代理页面，然后9080再进行下一步操作.

1、在父窗口（9080端口）下点击按钮，执行下面方法，生成一个iframe然后跳转到8082端口页面

// 调用iframe
 function exec_iframe(){  
    var tokenid = $.cookie("TOKENID");
    var param = {
        "backUrl": "/components/ms.report/execIframe.html?"+new Date()
    }
    var url = "http://127.0.0.1:8082/autologin.html?p=" + param;
    var exec_obj;
    if(typeof(exec_obj)=='undefined'){  
          exec_obj = document.createElement('iframe');  
          exec_obj.name = 'tmp_frame';  
          exec_obj.src = url;  
          exec_obj.style.display = 'none';  
          document.body.appendChild(exec_obj);  
      }else{  
          exec_obj.src = url;  
      }  
    }

2、在8082端口创建/components/ms.report/execIframe.html页面

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<script type="text/javascript">  
    parent.window.myiframe.saveReportDataToJson();
</script> 
</body>
</html>

3、开始执行9080端口里面嵌入的8082端口页面的saveReportDataToJson方法.

4、返回值

var url = "127.0.0.1:8082/index.html#/sm/proxyReport/" + encodeURIComponent(encodeURIComponent(res.code)) + "_" + new Date();
document.getElementById("proxyIframe").setAttribute("src",url);

5、9080端口接受返回值并处理

var str = window.location.hash;
var index = str.lastIndexOf("\/");  
str = str.substring(index + 1, str.length);
str = str.split('_')[0];
window.parent.parent.showUserSelect(str);