Windows Phone IE Mobile - How do you disable auto urls ( addresses and phone numbers ) from being created?

StackOverflow https://stackoverflow.com/questions/19686854

Question

Windows phone 7/8 injects map: links and tel: links into the page DOM. These injected links also change the DOM: it converts spaces in the raw HTML document into &nbsp; and newlines into <br> tags, then wraps these in anchors. The browser also seems to have false positive when detecting addresses, it converts elements in an unordered list into a map: link.

I want to disable this functionality completely (if at all possible).

Example HTML:

<!doctype html>
<html>
<head>
    <!--<meta name="format-detection" content="none"/>-->
    <!--<meta http-equiv="X-UA-Compatible" content="IE=10,chrome=1">-->

    <!--<script type="text/javascript">-->
        <!--document.execCommand('AutoUrlDetect', false, false);-->
    <!--</script>-->
</head>
<body>
    <div>
        <p>
            9380 W. Glendale Ave.<br />
            Glendale,&nbsp;AZ&nbsp;85305-9400
        </p>

        <!--<p x-ms-format-detection="none">-->
        <p>
            623-872-6700
        </p>
    </div>

    <ul>
         <li>Quicker Checkout</li>
         <li>Order History/Track Your Order</li>
         <li>Create an Address Book</li>
         <li>Manage CLUB/Credit Cards</li>
         <li>Create a Wish List</li>
         <li>Write Customer Product Reviews</li>
         <li>Access Your Account Anywhere</li>
    </ul>
</body>
</html>

This code will produce the following output: Output image

The page has these links added:

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <a href="maps:9380%20W.%20Glendale%20Ave.%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20Glendale,%20AZ%2085305-9400">9380 W. Glendale Ave.<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <br>Glendale,&nbsp;AZ&nbsp;85305-9400</a>

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <a href="tel:6238726700">623-872-6700</a>

As you can see it converted the space in the war HTML into &nbsp; Its hard to see but it also added an extra <br> from the \n in the raw HTML as well.

I cannot simply remove the spaces and \n from the source since most of this data is managed content that is used on many devices and non-mobile sites.

Currently I have tried these in many combinations.

<meta name="format-detection" content="none"/>
<meta name="format-detection" content="telephone=no"/>
<meta http-equiv="X-UA-Compatible" content="IE=10,chrome=1"> <- and many combinations
document.execCommand('AutoUrlDetect', false, false);
<p x-ms-format-detection="none">

I have tried to detect the change happening via JS mutation events, but it appears the browser doesn't send any events when it does these changes.

Was it helpful?

Solution

Replacing the <p>...</p> around the address with <div>...</div> around each line removes the whitespace issues, but that also breaks the address parser such that it won't link the address to the map. Unfortunately adding microformats doesn't help any with bringing location detection back, but this snippet doesn't have the linked whitespace issue:

<div class="vcard">
    <div class="n">Mystery Guest</div>
    <div class="addr">9380 W. Glendale Ave.</div>
    <div><span class="locality">Glendale</span>, <span class="region">AZ</span> <span class="postal-code">85305-9400</span></div>

    <div class="tel">623-872-6700</div>
</div>

My guess is that breaking up the address into distinct block-level elements chokes the address parser and lets you go on your way.

This has been tested on a Lumia 521

OTHER TIPS

Ok, there is already another person who asked this same question here on stackoverflow, but no good answers were suggested, the only answer being to use imageGD in php to generate an image instead of plain text which obviously would be hard to neatly style similarly to the text around it.

So, as I don't own a IE10 mobile device, let me share what I did find out and some ideas:

  • There is no official way to simply disable it with javascript/meta tags or any similar approach.
  • Despite you pointing out that you don't control the data, you could build your own address recognizer (on the server side this would be probably easier than on the client side, as on the client side you would have to loop over all elements and validate them with some regex) and replace things that look like addresses with either
    • a weird DOM markup, like trying to insert invisible DOM elements with text in them
    • an inline SVG with only a text element, which I am very sure won't be recognized or in the worst worst case a canvas element.

Either way it's good to acknowledge that Windows Phone and IE10 mobile are products in development. Not to say that iOS and android don't have their fair share of problems, however users choosing Windows Phone are often aware that a lot of things won't work and that they are using a fairly 'experimental' device with minimal market share (and the people who didn't realize this this at the time of writing tend to trade their devices), so deciding to not or minimally supporting windows phone devices is in general quite a sensible choice. I know this is not the answer you're looking for, but I thought it was a good thing to add none the less.

According to this post you can use the <pre> tag to disable this feature (if you are OK with the formatting).

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top