单击div中的iFrame时如何切换项目？

Question

当在我的 tumblr 主题中单击音频帖子的播放按钮时，我想将“隐藏”类切换到“均衡器”div。我的 HTML 如下：

<div class="musicplayer">
<div id="playbutton">
{block:AudioPlayer}
{AudioPlayer}{/block:AudioPlayer}</div>
<div class="equalizer hide">
</div>

问题是 tumblr 导入了音频播放器的相关代码，所以下面的脚本没有运行：

$('.playbutton').click(function(){
     $(".equalizer").toggleClass("hide");
});

在页面的源码中，本节的HTML如下：

<div class="musicplayer">
<div id="playbutton">
<span id="audio_player_151764783410"><div class="audio_player"><iframe class="tumblr_audio_player tumblr_audio_player_151764783410" src="http://myspacethemeology.tumblr.com/post/151764783410/audio_player_iframe/myspacethemeology/tumblr_o6qkb21Z4L1utbsw6?audio_file=http%3A%2F%2Fk003.kiwi6.com%2Fhotlink%2Fdge2vl4ftj%2F04_Into_You.mp3&color=white&simple=1" frameborder="0" allowtransparency="true" scrolling="no" width="207" height="27"></iframe></div></span></div>
<div class="equalizer hide">
</div></div>

音频播放器位于 iFrame 中，每个音频帖子的 iFrame 类都不同。是否有任何脚本可以在单击播放按钮时触发事件？

Answer 1

您无法检测到 跨域 iframe 中的事件。

See this answer for reference。

Answer 2

正如@adam 所说，您无法检测跨域 iframe 的事件。但是你仍然可以用 CSS 伪元素做一件棘手的事情。但此修复将禁用对 iframe 的控制。即）您无法单击 iframe 中的任何内容。

.audio_player{
    position:relative;
}
.audio_player:after{
   content:'';
   position:absolute;
   top:0; left:0; right:0; bottom:0;
}

您的点击事件现在可以工作了。希望这会有所帮助。