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

我有一个网站，我已经嵌入了lightview，提出了一个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>.

请随时给我打电话。

移动浏览器支持：

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>.

请随时给我打电话。

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

如果Flash可用，您可以通过将以下代码添加到HTML文档的

HEAD

元素中包含的JS脚本中，将适当的

单击

事件处理程序动态绑定到从

tel:

开始具有

href

属性的所有链接：

if（FlashDetect.installed）{
//$表示用于绑定'click'事件的jQuery。
$（文档）。在（'click'，'A[href^=“tel:”），函数（）上{
//[启用闪存的系统的某些特定代码。]
})
}

使用JavaScript，您可以在

文档中检查
touchstart
事件。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>

请随时给我打电话。

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>

JQuery：

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

---

您好，您可以使用“``或

\\

（四个空格）格式化输出代码。查看更多信息Flash不仅在iOS上被禁用（或：不可用）。你通常应该输出

tel:

URL，让浏览器处理它们，或者——如果真的需要的话——通过检查flash可用性，然后打开弹出窗口来逐步增强你的页面。我想我的问题真的不清楚。让我试着解释一下。如果我使用手机上的Mobile Safari和桌面上的Firefox加载我的网页。。。当我用手机（mSafari）点击“呼叫”链接时，应该要求我拨打该号码，但在我的桌面（FF）上，它应该加载iframe/call.html页面。。。想象一下html超链接标记中的if/else（我知道这是不可能的）。顺便说一句，感谢到目前为止的所有回复：）感谢Marat的建议，但我想我的问题更多的是关于如何基于浏览器/闪存支持动态选择超链接。元素是否必须用javascript动态构造？@Mike:当用户单击链接时，动态构造是什么意思？有这样的事件，是的，我的意思是如果我从移动safari（在我的iPhone上）和Firefox（在我的桌面上）加载我的网页。。。当我点击超链接“call”时，safari会让我拨打这个号码，而firefox会显示iframe/call.html页面。是的，就像我说的：输出

tel:

-url，在页面的

load

事件中检查（使用JS）flash是否可用，然后迭代所有链接并将其更改为iframe-openers@Mike我添加了一个例子。谢谢你的建议，但我想我的问题更多的是关于如何基于浏览器/闪存支持动态选择超链接。元素是否必须在javascript中动态构造？