Determine hyperlink to use based on browser type in HTML

Question

I have a website which I have embedded lightview to bring up an iframe which has the Google Voice badge in it. This badge is flash based, so cannot be seen in iOS. In order to get a phone number to dial in iOS, it has to have a different format.

My question is how can I add logic to the HTML to know which type to choose based on the browser type (mobile vs normal)?

Full browser support:

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

Mobile browser support:

Feel free to give me a <a href="tel:1-408-555-5555">call</a>.

Hi, you can format your output a code using `` ` or `_ _ _ _` (four spaces). See more at http://stackoverflow.com/faq — Andreas Louv, Nov 07 '12 at 00:05
Flash is not only disabled (or: not available) on iOS. You should generally output `tel:` urls, and let the browser handle them or - if really needed - progressively enhance your page by checking for flash availability and then opening the popup — Bergi, Nov 07 '12 at 00:15
I guess my question really isn't clear. Let me try to explain. If I load my webpage using Mobile Safari on my phone and Firefox on my desktop... when I click on the "call" link using my phone (mSafari) I should be asked to dial that number, but on my desktop (FF) it should load the iframe/call.html page... imagine an if/else in the html hyperlink tag (which I know isn't possible). BTW, thanks for all the responses thus far :) — Mike, Nov 07 '12 at 01:23

Marat Tanalin · Accepted Answer · 2012-11-07T11:43:44.430

3

You can try to detect if Flash is available instead of detecting browser.

You can dynamically bind an appropriate click event handler to all links having href attribute beginning from tel: if Flash is available by putting following code to a JS-script included in HEAD element of your HTML document:

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

edited Nov 07 '12 at 11:43

answered Nov 07 '12 at 00:08

Marat Tanalin

13,927
1
36
52

Thanks for the suggestion Marat, but I guess my question is more about how to DYNAMICALLY choose a hyperlink based on the browser/flash support. Would the element have to be dynamically constructed in javascript? – Mike Nov 07 '12 at 00:14
1

@Mike: What do you mean by *dynamically* - when the user clicks the link? There are events for that, yes – Bergi Nov 07 '12 at 00:20
I mean if I load my webpage from mobile safari (on my iPhone) and from Firefox (on my desktop)... When I click the hyperlink "call" that safari will ask me to call the number while firefox will bring up the iframe/call.html page. If that makes sense. – Mike Nov 07 '12 at 01:17
Yes, just as I said: output the `tel:`-url, and on the `load` event of your page check (with JS) whether flash is available, then iterate all links and change them to iframe-openers – Bergi Nov 07 '12 at 11:22
@Mike I have added an example. – Marat Tanalin Nov 07 '12 at 11:41

score 1 · Answer 2 · edited Apr 20 '15 at 20:18

Using JavaScript you can check for the touchstart event in document.documentElement to detect touch devices:

var isTouch = 'touchstart' in document.documentElement;

Then on Android you can check the userAgent to see if it's a mobile phone:

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

On IOS simply check for iPhone:

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

The rest of the party you can add on yourself. Hope you get the picture:

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;

A little complex.

Just to quick answer your comment:

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';
    }
}

And your 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>

Thanks for the suggestion NULL, but I guess my question is more about how to DYNAMICALLY choose a hyperlink based on the browser/flash support. Would the element have to be dynamically constructed in javascript? — Mike, Nov 07 '12 at 00:14

score 1 · Answer 3 · edited May 23 '17 at 12:06

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.

Determine hyperlink to use based on browser type in HTML

3 Answers3