Question

我有一个网站，我已经嵌入了lightview来调出一个带有Google Voice徽章的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:1-408-555-5555">call</a>.

Answer 1

您可以尝试检测是否Flash is available而不是检测浏览器。

如果Flash可用，您可以将适当的click事件处理程序动态绑定到href属性从tel:开始的所有链接，方法是将以下代码放入{HEAD中包含的JS脚本中。 1}} HTML文档的元素：

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

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

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:1-408-555-5555">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>

Answer 3

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:1-408-555-5555">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();
    }
});

The credits of the FlashDetect answer are from Marat.

根据HTML中的浏览器类型确定要使用的超链接

3 个答案: