5

Windows phone 7/8 将 map: links 和 tel: links 注入到页面 DOM 中。这些注入的链接也改变了 DOM：它将原始 HTML 文档中的空格转换为   并将换行符放入 <br> 标签中，然后将它们包装在锚点中。浏览器在检测地址时似乎也有误报，它将无序列表中的元素转换为地图：链接。

我想完全禁用此功能（如果可能的话）。

示例 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>

此代码将产生以下输出： 输出图像

该页面添加了以下链接：

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

如您所见，它将战争 HTML 中的空间转换为   它很难看到，但它还在原始 HTML 中的 \n 中添加了一个额外的 <br> 。

我不能简单地从源中删除空格和 \n，因为这些数据大部分是在许多设备和非移动网站上使用的托管内容。

目前我已经尝试了很多组合。

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

我试图检测通过 JS 突变事件发生的变化，但似乎浏览器在进行这些更改时没有发送任何事件。

4

3 回答 3

3

<p>...</p>用每行周围的地址替换周围的地址可以<div>...</div>消除空格问题，但这也会破坏地址解析器，使其不会将地址链接到地图。不幸的是，添加微格式对恢复位置检测没有任何帮助，但是这个片段没有链接的空白问题：

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

我的猜测是，将地址分解为不同的块级元素会阻塞地址解析器并让您继续前进。

这已经在 Lumia 521 上进行了测试

于 2013-11-20T23:08:59.690 回答
1

好的，已经有另一个人在 stackoverflow 上问过同样的问题，但没有提出好的答案，唯一的答案是在 php 中使用 imageGD 来生成图像而不是纯文本，这显然很难与类似它周围的文字。

所以，由于我没有 IE10 移动设备，让我分享一下我的发现和一些想法：

  • 没有官方方法可以简单地使用 javascript/meta 标签或任何类似方法来禁用它。
  • 尽管您指出您不控制数据，但您可以构建自己的地址识别器（在服务器端这可能比在客户端更容易，因为在客户端您必须遍历所有元素和用一些正则表达式验证它们）并将看起来像地址的东西替换为
    • 一个奇怪的 DOM 标记，比如尝试插入带有文本的不可见 DOM 元素
    • 一个只有一个文本元素的内联 SVG ，我很确定它不会被识别，或者在最坏的情况下是一个画布元素。

不管怎样，承认 Windows Phone 和 IE10 移动版都是开发中的产品是件好事。并不是说 iOS 和 android 没有他们应有的问题，但是选择 Windows Phone 的用户通常意识到很多事情都行不通，并且他们使用的是市场份额很小的相当“实验性”的设备（并且在撰写本文时没有意识到这一点的人倾向于交易他们的设备），因此决定不支持或最低限度地支持 Windows Phone 设备通常是一个非常明智的选择。我知道这不是您要寻找的答案，但我认为添加仍然是一件好事。

于 2013-11-07T15:47:19.520 回答
0

根据这篇文章，您可以使用<pre>标签禁用此功能（如果您对格式没问题）。

于 2013-11-08T23:45:57.530 回答