我们把引入ifram的页面称为F页面,被引入的页面称为C页面
1,F页面往C页面传值
~~ 在F页面写入
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="">
</head>
<body>
<iframe src="./test2.html" id="content1" height="600px" width="400px" name="iframe1"></iframe>
<script type="text/javascript" charset="utf-8" async defer>
let iFrame = document.getElementById('content1')
iFrame.onload = function () {
iFrame.contentWindow.postMessage(
{
oCoffsetH: 2,
iFscrollTop: 0
}, '*')
}
</script>
</body>
</html>
~~ 在C页面写入
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="">
</head>
<body style="overflow-y: scroll;">
<script type="text/javascript" charset="utf-8" async defer>
function receiveMessage(e) {
console.log(e)
}
window.addEventListener("message", receiveMessage, false);
</script>
</body>
</html>
2,C页面往F页面传值
~~ 在 F页面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="">
</head>
<body>
<iframe src="./test2.html" id="content1" height="600px" width="400px" name="iframe1"></iframe>
<script type="text/javascript" charset="utf-8" async defer>
function receiveMessage(e) {
console.log(e.data)
}
window.addEventListener("message", receiveMessage, false);
</script>
</body>
</html>
~~在C页面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="">
</head>
<body style="overflow-y: scroll;">
<script type="text/javascript" charset="utf-8" async defer>
parent.postMessage({
scrollH: window.'1',
offsetH: '2'
}, '*')
</script>
</body>
</html>