确定基于HTML中浏览器类型使用的超链接

Question

我有一个网站，我嵌入了LightView，以提出一个带有Google语音徽章的iframe。该徽章是基于Flash的，因此在iOS中看不到。为了在iOS中拨打电话号码，必须具有不同的格式。

我的问题是如何将逻辑添加到HTML中以了解基于浏览器类型（移动与正常）选择哪种类型？

？

完整的浏览器支持：

Feel free to give me a <a class='lightview' data-lightview-type="iframe" href="pages/call.html" data-lightview-options="width: 230, height: 101">call</a>.

移动浏览器支持：

Feel free to give me a <a href="tel:[phone]">call</a>.

Answer 1

您可以尝试检测是否可用而不是检测浏览器。

如果通过将proffer的代码放在html文档的HEAD元素中，则可以将适当的click事件处理程序绑定到具有从tel:开始的所有 href属性的所有链接：

if (FlashDetect.installed) {
    // $ means jQuery which is used to bind `click` event.
    $(document).on('click', 'A[href^="tel:"]', function() {
        // [Some specific code for Flash-enabled systems.]
    })
}

Answer 2

html：

<span class="flash-enabled">Feel free to give me a <a class='lightview' data-lightview-type="iframe" href="pages/call.html" data-lightview-options="width: 230, height: 101">call</a>.</span>
<span class="flash-disabled">Feel free to give me a <a href="tel:[phone]">call</a>.</span>

CSS：

.flash-disabled,
.flash-enabled {
    display: none;
}

jQuery：

$(document).ready(function() {
    if (FlashDetect.installed) {
        $('.flash-enabled').show();
        $('.flash-disabled').remove();
    } else {
        $('.flash-disabled').show();
        $('.flash-enabled').remove();
    }
});

FlashDetect答案的信用来自Marat。

Answer 3

使用JavaScript您可以检查document.documentElement中的touchstart事件以检测触摸设备：

var isTouch = 'touchstart' in document.documentElement;

然后，在Android上，您可以检查UserAgent，以查看是否是手机：

var isMobile = navigator.userAgent.toLowerCase().indexOf("mobile") > -1;

在iOS上只需检查iPhone：

var isMobile = navigator.userAgent.toLowerCase().indexOf("iphone") > -1;

您可以添加自己的其余聚会。希望您能得到图片：

var isTouch = 'touchstart' in document.documentElement,
    ua = navigator.userAgent.toLowerCase(),
    isMobile = isTouch ? ua.indexOf("android") > -1 ? ua.indexOf("mobile") > -1 : ua.indexOf("iphone") > -1 : false;

有点复杂。

---

只是快速回答您的评论：

onload = function() {
    var isTouch = 'touchstart' in document.documentElement,
        ua = navigator.userAgent.toLowerCase(),
        isMobile = isTouch ? ua.indexOf("android") > -1 ? ua.indexOf("mobile") > -1 : ua.indexOf("iphone") > -1 : false;
    if ( isMobile ) {
        document.getElementById("mobileLink").style.display = 'block';
        document.getElementById("browserLink").style.display = 'none';
    }
    else {
        document.getElementById("mobileLink").style.display = 'none';
        document.getElementById("browserLink").style.display = 'block';
    }
}

和您的HTML：

<div id="mobileLink">Feel free to give me a <a href="tel:[phone]">call</a</div>
<div id="browserLink">Feel free to give me a <a class='lightview' data-lightview-type="iframe" href="pages/call.html" data-lightview-options="width: 230, height: 101">call</a>.</div>