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 上，点击图像不会执行任何操作。

如果我从 onclick 代码中删除 stop2();，则 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

您的stop2() 通话似乎让iOS 窒息。您可能想尝试检测浏览器是否是 iOS 设备（一种简单但不太好的方法可能是使用用户代理字符串）或（更好）检查浏览器是否使用 @ 支持该功能987654321@。然后，如果您检测到它是 iOS 浏览器，只需从 stop2() 返回。