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

我想在tumblr主题内单击音频文章的播放按钮时，将类'hide'切换到'equalizer'div。我的HTML如下：如何在单击div内的iFrame时切换项目？

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

的audioplayer是在iFrame中，类iframe的是为每一个音频后期不同。是否有任何脚本可以在单击播放按钮时触发事件？

来源

2017-03-09 Roisin C

我在这个问题中输入错误，但#playbutton也不起作用。不过谢谢。 –

我刚刚在您的网站上，并注意到该类实际上是'.play_button'。我能够通过jQuery使用$（“。play_button”）来访问它 – Adam

@Adam我试过这个，没有什么似乎发生在我点击播放按钮时。 –

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

See this answer for reference。

来源

2017-03-09 23:00:07 Adam

谢谢，但是iframe仍然在运行脚本的页面的同一个域中（都在http://myspacethemeology.tumblr.com上）。 –

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

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

您的点击事件现在可以使用。希望这可以帮助。

来源

2017-03-09 23:16:11

感谢您的建议，但由于iframe包含音频的播放按钮，因此在此情况下iframe无需点击即可使用。虽然我会记住它以备将来使用！ –

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

回答

相关问题