关于苍穹组件之iframe传参交互原创
DC_W
16人赞赏了该文章
2,470次浏览
编辑于2021年12月31日 11:33:45
本案例基于VUE3作为前端，实现苍穹内嵌入自定义页面实现。
众所周知，苍穹iframe控件使用：
@Override
public void afterCreateNewData(EventObject e) {
IFrame iframe = this.getView().getControl([iframe控件标识]);
iframe.setSrc([目标url]);
}如何让插件接收来自iframe内页面传递过来的参数?只需要实现FormPlugin内的customEvent(CustomEventArgs e)方法，在收到参数时会自动调用该方法，参考写法：
@Override
public void customEvent(CustomEventArgs e) {
String key = e.getKey();//自定义控件标识
String args = e.getEventArgs();//数据
String ename = e.getEventName();//事件名称:这里默认是invokeCustomEvent
this.getView().showSuccessNotification(key+":"+args+":"+ename);
}苍穹接收部分已写好了，让我们来看看自定义页面部分如何发起接收\传递参数(其他框架语言同理，都是实现：window.parent.postMessage 方法和window.addEventListener监听器)
<template>
<Button @click="sendMsgs">发送</Button>
</template>
<script lang="ts" setup>
//接受来自上级窗口的postMessage
window.addEventListener('message', function (event) {
console.log(event.data);
});
//注意这里是重点,需要获取上级窗口的pageId,作为参数之一传入,否则苍穹无法判断对应哪个页面
let pageId = HttpUtils.getQueryParams(window.location.href)['pageId'];
const sendMsgs = () => {
window.parent.postMessage({
pageId: pageId, //该字段是苍穹专用
type: 'invokeCustomEvent',
content: {
msg: 'this is my message',
methodName: 'other',
color: 'blask',
},
},
'*',
);
};
</script>
最后,还有在苍穹插件中传递参数方法:
@Override
public void click(EventObject evt) {
IFrameMessage message = new IFrameMessage();
message.setContent("this is content");
message.setType("mytype");
IFrame iframe = this.getView().getControl([iframe标识]);
iframe.postMessage(message);
}这里，就实现了双向收发了。当然，可以在message中设置更多内容，比如origin等。如果遇到问题欢迎留言交流。
原创不易，如果帮助到您请一键三联~