英文:
Pass data from iframe to another iframe
问题
在这个示例中，在顶部 iframe 中，如何创建一个链接以将歌曲 1 的名称发送到底部 iframe 的函数？
要在顶部 iframe 中创建一个链接以将歌曲 1 的名称发送到底部 iframe 的函数，你可以在 top.php 文件中的链接标签中添加一个JavaScript事件，通过该事件调用底部 iframe 中的 playSong 函数并传递歌曲名称。以下是修改的代码：
<html>
<head>
</head>
<body>
<a href="javascript:void(0);" onclick="parent.frames['BottomFrame'].playSong('song 1')">click here for song 1<br></a>
<a href="javascript:void(0);" onclick="parent.frames['BottomFrame'].playSong('song 2')">click here for song 2<br></a>
<a href="javascript:void(0);" onclick="parent.frames['BottomFrame'].playSong('song 3')">click here for song 3<br></a>
</body>
</html>
这里我们使用 parent.frames['BottomFrame'] 来获取底部 iframe，并调用其中的 playSong 函数，并将歌曲名称作为参数传递给它。这样，当用户点击链接时，将触发相应的歌曲名称传递给底部 iframe 中的函数。
英文:
I have a main page with 2 iframes on it. How do you send data from 1 iframe to the other iframe with links?
In this example, in the top iframe, how do i make a link to send song 1 name to the bottom iframe's function?
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
得分: 0
为了实现这个，你可以使用 window.postMessage()。思路是从顶部 iframe 发送一条消息，然后在底部 iframe 中监听它。
你可以直接从顶部 iframe 向底部发送消息，或者你可以使用 index.html 作为中继站。在后一种情况下，你会从顶部 iframe 向父级 (index.html) 发送事件，然后在父级接收事件，最后再将它发送到底部 iframe。
英文:
To achieve this, you can use window.postMessage(). The idea is to send a message from the top iframe and listen to it in the bottom iframe.
You can send messages directly from the top iframe to the bottom, or you can use index.html as a hub. In the latter case, you would send events from the top iframe to the parent (index.html), receive the event in the parent, and then send it to the bottom iframe.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论