当两个iframe在同一页面中时,从另一个iframe更改iframe源


Change iframe source from another iframe when both the iframe are in same page

我有以下代码,我不能从第一个iframe播放第二个iframe的播放器。如果播放歌曲的链接在主页面,而不是在第一个iframe

内,则可以正常工作。
<script type="text/javascript">
function music(dir) {
          alert(dir);
        var iframe = document.getElementById("player");
        iframe.src = dir;
      } 
</script>
<iframe src="home.php" frameborder="0" scrolling="no" width="100%" height="100%" style="background:#993333"></iframe>
<iframe id="player" src="player.php" frameborder="0" scrolling="no" width="400px" height="100px" style="background:#66FF99"></iframe>

//home。

<a href="#" onclick="return music('player.php?item=test2')" >Song2</a>
//player.php

<object type="application/x-shockwave-flash" data="dewplayer.swf?mp3=mp3/music.mp3&amp;autostart=1" width="200" height="20" id="dewplayer"><param name="wmode" value="transparent" />
</object>

示例:main.php

<script type="text/javascript">
function music(dir) {
          alert(dir);
        var iframe = document.getElementById("player");
        iframe.src = dir;
      } 
</script>
<iframe src="home.php" frameborder="0" scrolling="no" width="100%" height="100%" style="background:#993333"></iframe>
<iframe id="player" src="player.php" frameborder="0" scrolling="no" width="400px" height="100px" style="background:#66FF99"></iframe>

player.php

<?php if(!empty($_GET['item'])){echo '<div>item = '.$_GET['item'].'</div>';} ?>
<object type="application/x-shockwave-flash" data="dewplayer.swf?mp3=mp3/music.mp3&amp;autostart=1" width="200" height="20" id="dewplayer"><param name="wmode" value="transparent" />
</object>

home。

<a href="#" onclick="parent.music('player.php?item=test2')" >Song2</a>

  1. 第一个iframe没有ID
  2. 这两个iframe都不是彼此document的一部分。所以如果你要改变其中一个的url你必须在图片中引入parent

你可以使用新的window.postMessage API从一个远程帧发送消息到它的父帧,然后有父窗口代理通过传递消息到另一个iframe使消息返回到另一个iframe。

有关这方面的文档,请参阅Mozilla页面(https://developer.mozilla.org/en-US/docs/DOM/window.postMessage)