div内のiFrameをクリックしてアイテムを切り替えるにはどうすればいいですか？

Question

tumblrのテーマでオーディオポストの再生ボタンをクリックすると、クラス 'hide'を 'equalizer' 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> 

audioplayerはインラインフレーム内にある、と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; 
} 

クリックイベントがすぐに機能します。お役に立てれば。