用于iPhone / iPod Touch / iPad的safari（ios）中的锚标签 [英] anchor tag not working in safari (ios) for iPhone/iPod Touch/iPad

问题描述

这就是我在HTML5上的内容

This is what I have on my HTML5

<div class="google-play">
    <a href="http://example.com" role="button">
        <img src="img/google-play-btn.png"/>                                                                    
    </a>
</div>

并且在Chrome，FF，android上运行正常，但似乎无法在iPad上运行。

and works fine on chrome, FF, android but doesn't seem to work on iPad.

推荐答案

在所有锚标签上通过jQuery使用 touchend 事件。例如：

Use touchend event via jQuery on all anchor tags. For example:

$(function () {    
    $('a').on('click touchend', function() { 
        var link = $(this).attr('href');   
        window.open(link,'_blank'); // opens in new window as requested 

        return false; // prevent anchor click    
    });    
});

如果您只想制作上述iPhone和iPad特定功能，请检查设备 是iPad，iPhone等等。如下所示：

If you want to make the above iPhone and iPad specific function only, check to see if the "device" is an iPad, iPhone, etc. Like so:

$(function () {

    IS_IPAD = navigator.userAgent.match(/iPad/i) != null;
    IS_IPHONE = (navigator.userAgent.match(/iPhone/i) != null) || (navigator.userAgent.match(/iPod/i) != null);

    if (IS_IPAD || IS_IPHONE) {

        $('a').on('click touchend', function() { 
            var link = $(this).attr('href');   
            window.open(link,'_blank'); // opens in new window as requested

            return false; // prevent anchor click    
        });     
    }
});

这篇关于用于iPhone / iPod Touch / iPad的safari（ios）中的锚标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！