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

最近制作一个大数据展示页面，需要嵌套第三方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地址

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

这是本程序汪开发过程中遇到得一些问题，希望对各位同学能起到一些借鉴作用

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

JS iframe父子页面元素调用方法 window parent top 解释
父窗口调用子窗口 var hasMore = parent.document.getElementByIdx_x_x_x("hasMore").value; 子窗口调用父窗口 do ...
iframe父页面子页面相互调用方法
父页面寻找子页面元素: window.frames["iframeName"].document.getElementsByClassName('div')[0] $(docume ...
iframe 父子页面相互访问，iframe属性、安全问题
iframe是html标签,具有一般标签的属性: width iframe的高度 height iframe的宽度 src iframe里面加载的页面url name 可以通过window.frame ...
js取iframe 上级页面_原生js获取iframe中dom元素--父子页面相互获取对方dom元素的方法...
用原生js在父页面获取iframe子页面的元素,以及在子页面获取父页面元素,这是平时经常会用到的方法,这里写一个例子来总结下: 1.父页面(demo.html),在父页面修改子页面div的背景色为灰色 ...
iframe父子页面间通信总结
随着网页结构的复杂化,页面内嵌frame越来越常见,但不管是作为内容页来显示,还是作为组件模块嵌入,都有父子页面间通信的需求可能,因此为了更好的实现需求就必须了解父子页面间的通信. iframe子页面 ...
上传图片至服务器，写入到数据库Blob字段中，以及从数据库读取Blob信息（iframe父子页面传值）(1)
最近做了个用户维护功能,涉及到照片的操作. 照片是存到数据库oracle中的Blob字段中. 难点有两个: 1,图片的上传:2,Blob字段的读取. 先说图片的上传吧, 我使用common-fileu ...
layui如何获取父节点的父节点_layui框架中layer父子页面交互的方法分析
本文实例讲述了layui框架中layer父子页面交互的方法.分享给大家供大家参考,具体如下: layer是一款近年来备受青睐的web弹层组件,官网地址是:http://layer.layui.com/ ...
原生实现C#与Lua相互调用方法
原生实现C#与Lua相互调用方法(Unity3D可用) Lua是一种很好的扩展性语言,Lua解释器被设计成一个很容易嵌入到宿主程序的库,下面这篇文章主要给大家介绍了关于原生实现C#与Lua相互调用方法 ...
maven项目多模块相互调用方法
maven项目多模块相互调用方法问题背景解决方法方法1 方法2 问题背景 maven项目包括多个子模块,类似下图: 现在[web]模块某个类想要调用[service]模块的某个类的某个方法. 如 ...

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

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

最新文章

热门文章