iframe父页面调用子页面方法,并且获取数据(无跨域)
以上就是 iframe父页面调用子页面方法,并且获取数据(无跨域)最难部分就是跨越了。一定要注意:父子页面两边都要监听,子页面监听父页面传过来的参数,再根据参数判断调取哪个方法。父页面监听子页面传过来的数据。(注意:VUE的话将此方法写在mounted里边,如果是多次调取此方法的话,就换成window.onmessage=(e)=>{}2. 监听父页面传过来的参数来判断调取哪个方法。
·
父页面:
1. HTML部分(先创建按钮写一个方法)
<button onclick="geteList()">获取数据</button>
2. JS部分(这里是获取到子页面,在给子页面传类型获取子页面指定的方法)
function geteList() {
var win = document.getElementById('iframeId').contentWindow
win.postMessage({ type: 8 }, '*')
}
3.JS部分(这里监听子页面方法返回的参数)(注意:VUE的话将此方法写在mounted里边,如果是多次调取此方法的话,就换成window.onmessage=(e)=>{}
window.addEventListener('message', function (event) {
console.log(event.data)
});
子页面:
1. 写一个传给父页面的方法。
getHiddenList() {
this.$refs.generateForm.getData().then(res => {
var newList = {}
newList.data = res
newList.type = 8
window.parent.postMessage(newList, '*')
})
},
2. 监听父页面传过来的参数来判断调取哪个方法
window.addEventListener('message', function (e) {
if (e.data.type === 1) {
this.getHiddenList()
}
}, false);
以上就是 iframe父页面调用子页面方法,并且获取数据(无跨域)最难部分就是跨越了。 一定要注意:父子页面两边都要监听,子页面监听父页面传过来的参数,再根据参数判断调取哪个方法。父页面监听子页面传过来的数据。
更多推荐
已为社区贡献1条内容
所有评论(0)