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

【问题标题】：Determine hyperlink to use based on browser type in HTML根据 HTML 中的浏览器类型确定要使用的超链接
【发布时间】：2012-10-27 00:12:27
【问题描述】：

我有一个网站，我嵌入了 lightview 以调出一个 iframe，其中包含 Google Voice 徽章。此徽章是基于 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>.

【问题讨论】：

您好，您可以使用 ` ` 或 _ _ _ _（四个空格）将输出格式化为代码。更多信息请访问stackoverflow.com/faq
Flash 不仅在 iOS 上被禁用（或：不可用）。您通常应该输出tel: url，并让浏览器处理它们，或者 - 如果确实需要 - 通过检查闪存可用性然后打开弹出窗口来逐步增强您的页面
我想我的问题真的不清楚。让我试着解释一下。如果我使用手机上的 Mobile Safari 和桌面上的 Firefox 加载我的网页......当我使用手机 (mSafari) 单击“呼叫”链接时，应该要求我拨打该号码，但在我的桌面 (FF) 上它应该加载 iframe/call.html 页面...想象一下 html 超链接标记中的 if/else（我知道这是不可能的）。顺便说一句，感谢迄今为止的所有回复:)

标签： javascript html browser backwards-compatibility graceful-degradation

【解决方案1】：

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

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

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.]
    })
}

【讨论】：

感谢 Marat 的建议，但我想我的问题更多是关于如何根据浏览器/flash 支持动态选择超链接。元素是否必须在 javascript 中动态构造？
@Mike：动态是什么意思——当用户点击链接时？有活动，是的
我的意思是，如果我从移动 Safari（在我的 iPhone 上）和 Firefox（在我的桌面上）加载我的网页...当我点击超链接“调用”时，Safari 会要求我调用编号，而 firefox 将调出 iframe/call.html 页面。如果这有意义的话。
是的，正如我所说：输出tel:-url，并在页面的load事件上检查（使用JS）flash是否可用，然后迭代所有链接并更改它们到 iframe-openers
@Mike 我添加了一个例子。

【解决方案2】：

使用 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: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>

【讨论】：

感谢 NULL 的建议，但我想我的问题更多是关于如何根据浏览器/flash 支持动态选择超链接。元素是否必须在 javascript 中动态构造？

【解决方案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.

【讨论】：