javascriptwindows-phone-8windows-mobilewindows-phoneie-mobile

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

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.

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