iframe跨域父子页面通信方法

最新推荐文章于 2024-08-08 22:17:44 发布

milkhq

最新推荐文章于 2024-08-08 22:17:44 发布

阅读量1.9k

点赞数

分类专栏：前端文章标签： iframe 跨域代理页面 postMessage

本文链接：https://blog.csdn.net/milkhq/article/details/106569155

版权

本文介绍了在iframe跨域情况下，如何实现父子页面间的通信。包括通过设置代理页面和利用postMessage方法进行数据传递的两种解决方案，详细阐述了各自的实现步骤和效果。

摘要由CSDN通过智能技术生成

尽管iframe因兼容、性能等问题逐渐被替换掉，但有不少存量项目仍在使用。最近，我们部门一位小伙伴遇到iframe跨域相关问题，详细如下：

[问题前置条件]

有两个系统A、B（都是银行存量老系统），A、B跨域；
A系统中有一个页面a、B系统中有一个页面b；
b以iframe方式嵌在a页面中。

[问题描述]

原来的逻辑是：在b页面有一个保存按钮，点击“保存” -> 将b页面的数据存在B系统，a页面处理完成后调用B系统的接口，把b页面的数据再通过接口的方式传给A系统。
现在优化的逻辑是：在b页面有一个保存按钮，点击“保存” -> b页面调用a页面的方法，将数据传过去，直接保存。

那么，iframe、跨域、如何通信？

[解决方法]

方法一：通过代理页面通信

父页面http://localhost:8081/dlParent.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>利用代理页面解决iframe跨域问题</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
    function excute(url){
        $("#test2").attr("src", url);
    }
</script>
</head>
<body>
    <h1>父页面</h1>
    <iframe id="test1" src=