Question

我有以下代码，我无法在第一个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.php

<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>

Answer 1

第一个iframe没有ID。
这两个iframe都不属于彼此的document。因此，如果您必须更改其中一个的网址，则必须在图片中引入parent。

Answer 2

您可以使用新的window.postMessage API从一个远程帧向其父级发送消息，然后让父窗口代理通过将该消息传递到另一个iframe来将消息发回另一个iframe。

有关此文档，请参阅Mozilla页面（https://developer.mozilla.org/en-US/docs/DOM/window.postMessage）

Answer 3

实施例： 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.php

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

当iframe位于同一页面时，从另一个iframe更改iframe源

3 个答案: