react17同源iframe父子页面相互调用方法

最新推荐文章于 2025-04-05 09:00:00 发布

胡不说

最新推荐文章于 2025-04-05 09:00:00 发布

阅读量1.9k

点赞数 2

分类专栏：前端文章标签： js react

本文链接：https://blog.youkuaiyun.com/weixin_42738504/article/details/119511189

版权

前端专栏收录该内容

9 篇文章

订阅专栏

本文介绍了在React应用中如何与嵌套的第三方iframe进行交互，包括父子页面间的通信方法，以及如何搭建同源开发环境以方便调试。作者详细展示了将方法挂载到window对象，子页面调用父页面方法，以及父页面调用子页面方法的实现过程，同时还分享了使用PHP小皮搭建同源环境的步骤，尽管调试时需要不断打包，但为开发者提供了一种解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近制作一个大数据展示页面，需要嵌套第三方html，并进行相应的交互。
如下图：
在这里插入图片描述
其中A页面需要与第三方iframe进行交互，同时iframe选择公司或者园区时会回显到树选择器中。

先上解决办法

1，利用iframe进行父子页面通信，相互调用父子页面中的方法。（同源）
首先，我在react17中的index.js中把第三方需要调用我的方法挂载到window中

// 与3d交互的文件
import {webGl_web_iconClick} from '../src/http/webgl_web_iconClick'
window.webGl_web_iconClick=webGl_web_iconClick;

webgl_web_iconClick.js文件

export function webGl_web_iconClick(val) {
   alert('我是父组件中的方法:'+val);
  }

我们再创建一个html文件，作为传参调试的案例child（这个就是我们要嵌套的页面）

<!DOCTYPE html>
<html lang="zh-CN" >
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<body>
  <div class="content">
      <button onclick="btnClick()">子页面按钮</button>    
  </div> 
</body>
<script>
  function btnClick(){
    //调用父页面的方法
    parent.window.webGl_web_iconClick('我是子页面的参数');
  }
  window.frames.childFun=function(val){
    alert('我是子页面的方法！:'+val);
  }
</script>
</html>

在父页面来调用子页面的方法

	// 调用子组件的方法并传参
		useChildFun(){
			window.frames.iframe.childFun('我是父组件的参数！');
		}

render函数中新建一个dom来触发这个事件

<div onClick={this.useChildFun}>调用子页面的方法</div>

好嘞，俺们来看看效果
在这里插入图片描述

看提示框，我们的方法已经调用了，并且参数也已经传成功了！

如何搭建同源开发环境？

这个时候我借用了php的小皮，点击下载安装。
1，启用数据库跟服务器
在这里插入图片描述
2，创建网站节点并配置映射地址

3，将iframe的html与react打包的build文件放同一个文件夹

通过地址访问

react项目中iframe地址

这样我们就搭建好了同源开发环境，只是要调试的时候得不断得打包，会比较麻烦。