javascript onclick結合2個事件在ios上不起作用（iPhone，iPad）

Question

我在onclick結合了2個javascript來做2件事：
1.停止音頻播放器
2.加載並內含視頻的iframe

以下代碼適用於所有瀏覽器，但不適用於iOS（iPhone，iPad）

<a class="aboutclick" href="#" onclick="stop2();document.getElementById('frame').innerHTML='&lt;iframe src=&quot;paul-on-paul.html&quot; width=&quot;100%&quot; height=&quot;600&quot; scrolling=&quot;no&quot; frameborder=&quot;no&quot;&gt;&lt;/iframe&gt;'"><img src="assets/video-cold.jpg" alt="paul-gregory-video" width="161" height="81" border="0" /></a>

onclick代碼開頭的stop2()可以關閉音樂播放器。 （它是Flash音頻播放器，因此不適用於iOS）。 在存在此代碼的iPad，iPhone上，輕按圖像不會執行任何操作。

如果我刪除stop2(); 從onclick代碼中，iframe將在iOS設備上加載。

我需要能夠使用stop2()殺死音樂，但我還需要它在iOS設備上運行。

有什么建議么？

工作示例： http : //www.fixxed.com/test/pg （單擊右下角的視頻縮略圖）

Answer 1

首先，我建議您將所有onclick代碼移動到一個函數中，然后在單擊時調用該函數，如下所示：

window.foo = function(e) {
    stop2();
    document.getElementById('frame').innerHTML='<iframe src="paul-on-paul.html" width="100%" height="600%" scrolling="no" frameborder="no"></iframe>'
}

...

<a class="aboutclick" href="#" onclick="foo">
  <img src="assets/video-cold.jpg" alt="paul-gregory-video" width="161" height="81" border="0" />
</a>

這只會使事情變得更易於閱讀和維護。 然后，我建議您研究使用移動觸摸事件而不是單擊事件，結果將是這樣的：

window.foo = function(e) {
    stop2();
}

window.bar = function(e) {
    document.getElementById('frame').innerHTML='<iframe src="paul-on-paul.html" width="100%" height="600%" scrolling="no" frameborder="no"></iframe>';
}

...

<a class="aboutclick" href="#" onclick="foo" ontouchstart='bar'>
  <img src="assets/video-cold.jpg" alt="paul-gregory-video" width="161" height="81" border="0" />
</a>

Answer 2

似乎iOS阻塞了您的stop2()調用。 您可能想嘗試檢測瀏覽器是否為iOS設備（一種簡單但不太好的方法是使用用戶代理字符串），或者（更好）檢查瀏覽器是否使用Modernizr支持該功能。 。 然后，如果您檢測到它是一個iOS瀏覽器，只需從stop2()返回即可。

希望這可以幫助！