例如:父页面展示题目描述和题目状态,子页面进行题目作答。子页面答案保存后,父页面需要刷新题目状态。
实现方式window.opener结合postMessage实现
最初想法是通过window.opener调用父页面的方法实现,但是存在跨域问题(子页面和父页面不在同一个系统中(域名下))
所以最后结合postMessage派发message事件的方式实现。
示例代码如下:
父组件:
/**
* 编程题跳转点击
*/
handleCodeClick = (url) => {
window.open(url, '_blank');
// 监听编程题保存成功派发的事件
window.addEventListener('message', this.handleCodeSaved);
}
/**
* 编程题保存成功回调
*/
handleCodeSaved = (e) => {
let target_origin = '子页面的地址';
let real_origin = e.origin;
if (target_origin && target_origin === real_origin && e.data.type === 'refreshs') {
this.props.onCodeSaveCallBack && this.props.onCodeSaveCallBack();
}
}
子组件:
window.opener && window.opener.postMessage({ type: 'refreshs' }, '*');
出于安全考虑*最好改成父页面地址
代码中采用window.open可以使用a标签,但是target必须是_blank(打开新窗口)。 |