我有一个主页面上有2个iframe。你如何发送数据从一个iframe到另一个iframe的链接？
在这个例子中，在顶部的iframe中，我如何创建一个链接来发送歌曲1的名称到底部的iframe的函数？
index.html
<html>
<head>
<style>
html,body {height:100%;}
.h_iframe1 iframe {position:absolute;top:0;left:0;width:100%; height:calc(100% - 60px);}
.h_iframe2 iframe {position:absolute;bottom:0;right:0;width:100%; height:60px;}
</style>
</head>
<body>
<div class="wrapper">
<div class="h_iframe1">
<iframe name="MainFrame" src="top.php" frameborder="0" allowfullscreen></iframe>
</div>
</div>
<div class="wrapper">
<div class="h_iframe2">
<iframe name="BottomFrame" src="bottom.php" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</body>
</html>top.php
<html>
<head>
</head>
<body>
click here for song 1<br>
click here for song 2<br>
click here for song 3<br>
</body>
</html>bottom.php
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script>
function playSong(song) {
console.log(song);
}
</script>
</head>
<body>
audio player here
</body>
</html>
1条答案
按热度按时间vfh0ocws1#
要实现这一点，您可以使用window.postMessage()，其思想是从顶部iframe发送消息，并在底部iframe中侦听它。
您可以直接从顶部iframe向底部发送消息，或者您可以使用index.html作为中心，在后一种情况下，您将从顶部iframe向父iframe（index.html）发送事件，在父iframe中接收事件，然后将其发送到底部iframe。