html跨域传值,iframe 跨域传参

iframe 跨域传参

2020-08-19

编程之家

https://www.jb51.cc

编程之家收集整理的这篇文章主要介绍了iframe 跨域传参，编程之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

@H_403_0@

@H_403_0@

parent-index.html: (本地起服务，放在5000端口上)

//当前脚本

function resize() {

var ifr = document.getElementById(‘sendMessage‘);

//使用iframe的window向iframe发送message。

ifr.contentWindow.postMessage("123","http://localhost:5001");

window.addEventListener(‘message‘,function (e) {

alert(‘回传 ‘ + e.data)

})

}

child-second.html: (本地起服务，放在5001端口上)

xxxxx

window.addEventListener(‘message‘,receiver,false);

function receiver(e) {

if (e.data) {

console.log(e)

// 注释掉的为单次父子交互

// var obj = {‘name‘: ‘qwer‘,‘age‘: ‘xxx‘}

// e.source.postMessage(JSON.stringify(obj),e.origin);

// console.log(e.data)

document.getElementById(‘howMuch‘).onclick = function second() {

// 父子建立联系后，儿子html可以通过点击事件多次主动向父亲传值

var obj = {‘name‘: ‘qwer‘,‘age‘: ‘xxx‘}

window.parent.postMessage(JSON.stringify(obj),‘http://localhost:5000‘)

}

} else {

alert(e.data);

}

}

.