如何在單擊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時切換項目？

回答

相關問題