如何在二开中实现与内嵌iframe的通信?
2024-04-07 10:49
为什么被折叠? 0 个回复被折叠

回答(1)

白鲸 前台管理员
2024-04-07 16:21

需要给“iframe”组件内嵌一个网页,并绑定对应的二次开发代码。这里使用“iframe”组件、“基础单行文本”组件和“按钮”组件进行演示,实现以下两个效果来展示通信的过程:

1)点击"按钮""iframe"接受消息从而更新内部的文本。

2)点击"iframe"内的页面,发送消息给"按钮""按钮"更新"文本组件"的内容。


具体的操作步骤如下:

打开一个空白项目,在左侧菜单栏中各添加一个iframe、按钮、基础单行文本组件,如下图所示:


选中“iframe”组件,在右侧样式设置中将“数据源选择”修改为“文件夹地址”,将提前准备好的网页代码导入,点击链接即可查看代码:iframe内部的网页代码


在上方点击切换到“代码”窗口,添加一个新的脚本,为“iframe”绑定对应二开代码,点击链接即可查看代码:iframe绑定的二开代码


然后在下方的“自定义设置项”中,将“文本组件”设置为添加的“基础单行文本”组件,用来记录“iframe”内页面的点击次数,如下图所示:


最后选中“按钮”组件,添加一个新的交互:触发二次开发中的事件,如下图所示,这样就完成在二开中实现与内嵌iframe的通信的全部步骤。


第一个效果:点击"按钮""iframe"接受消息从而更新内部的文本,如下图所示:


第二个效果:点击"iframe"内的页面,发送消息给"按钮""按钮"更新"文本组件"的内容,效果如下图所示:

相关问题

扫描关注公众号

更多数字孪生可视化干货内容等你发现

了解更多内容

扫一扫
加入官方微信群
咨询热线0571-88650917
地址 公司 邮箱

杭州市文一西路海创科技中心 311121

杭州多算科技有限公司

support@shanhaibi.com

关注山海鯨官方qq群,了解更多内容

QQ群号:788095444

Copyright © 2024 多算科技, All Rights Reserved. 浙ICP备20006837号-5