关于ifram的postMessage双向传值

最新推荐文章于 2024-06-25 00:17:42 发布

胖哒哒

最新推荐文章于 2024-06-25 00:17:42 发布

阅读量461

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qq_42925966/article/details/99944440

版权

前端专栏收录该内容

11 篇文章 1 订阅

订阅专栏

我们把引入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>

胖哒哒

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
关于ifram的postMessage双向传值

我们把引入ifram的页面称为F页面，被引入的页面称为C页面1，F页面往C页面传值~~ 在F页面写入 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> ...
复制链接

扫一扫

专栏目录