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

Question

I'm combining 2 javascripts in the onclick to do 2 things:
1. Stop an audio player
2. Load and iframe that has a video

The following code works on all browsers but not 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>

The stop2() in the beginning of the onclick code is what turns off the music player. (it's Flash audio player so it doesn't apply to iOS). Tapping on the image does nothing on the iPad, iPhone with this code present.

If I remove stop2(); from the onclick code the iframe will load on iOS devices.

I need to be able to use the stop2() to kill the music but I also need it to work on the iOS devices.

Any suggestions?

Working example: http://www.fixxed.com/test/pg (click on the video thumbnail at lower right)

Answer 1

First I would suggest you move your move all your onclick code into a function and then call that function on click, like this:

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>

That just makes things much nicer to read and more maintainable. Then I would suggest that you look into using mobile touch events instead of click events, you will end up with something like this:

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

It seems like iOS is choking on your stop2() call. You might want to try detecting if the browser is an iOS device (one simple and not-so-good way of doing that might be with the user-agent string) or (better) check to see if the browser supports that functionality using Modernizr . Then, if you detect that it's an iOS browser, just return from stop2() .

Hope this helps!