1. 英文：cross-document messaging 简称：XDM
2. XDM的核心是postMessage()方法
例子：
父页面：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>canvas海报</title>
</head>
<body>
<iframe src="./h5.html" frameborder="1" id='iframe'></iframe>
<button id='btn'>传递</button>
<script>
let testData = {
arr: [{name: 'aaa', age: 12}, {name: 'bbb', age:14}],
imgUrl: 'https://img-blog.csdn.net/20180228152858703?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdGFuZ195aV8=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast'
}
var oButton = document.getElementById('btn')
oButton.onclick = function () {
var iframe = document.getElementById('iframe')
iframe.contentWindow.postMessage(JSON.stringify(testData), '*')
// 第一个参数类型是字符串，*表示不限制域
}
</script>
</body>
</html>子页面：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>h5</title>
</head>
<body>
<script>
window.addEventListener('message', function(event) {
console.log(JSON.parse(event.data))
})
</script>
</body>
</html>
扫一扫
3116
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
