- 新建 1个文件项目 2个文件,AA.html , BB.html;
AA.html
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<iframe id="ifram" src="./BB.html" frameborder="0" width="200px" height="200px"></iframe>
<div id="dd">我是dd</div>
</body>
</html>
<script>
var age = "31237628";
var name = "DDY";
document.querySelector("#dd").addEventListener("click", (e) => {
document.getElementById("ifram").contentWindow.postMessage("AAAAA","http://127.0.0.1:8848");
ifram.contentWindow.B('我是父级调用传给子的参数!')
}, false);
//方法
function A(data){
console.log(data)
}
</script>
BB.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
我是BB页面
</body>
</html>
<script>
console.log(parent.window.name)
window.onmessage=e=>{
console.log(e);
parent.window.A('我是子调用父方法传来的值!')
}
function B(data){
console.log(data)
}
</script>
- 运行AA页面,就可以向iframe里面传递数据,,至于调方法,也是大同小异.
网友评论