javascript onclick组合两个事件在ios(iPhone、iPad）上不起作用

javascript onclick combining 2 events does not work on ios (iPhone, iPad)

本文关键字：iPhone ios iPad 不起作用 两个 组合 onclick javascript 事件      更新时间：2023-09-26

我在onclick中组合两个java脚本来做两件事：
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（点击右下角的视频缩略图）

首先，我建议您将所有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>

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

相关文章：