html - 外部链接在iOS中不起作用

Question

我们的网站在WordPress上运行。在this page上，我们有一系列文本小部件，每个小部件都包含大量HTML和嵌入式CSS。这有点粗糙，但是它使我们可以为市场营销人员提供一个简单的模板，供他们用来添加新商品。

每个项目都是一个环绕图像，h1和一些p标签的链接。我们在iOS上遇到了一个非常奇怪的问题。该链接应该打开一个新的浏览器窗口。当我们使用iPhone 4并点击某些链接时(例如该页面上当前排名靠前的两个示例)，十分之九(十分之一)，我们在iOS顶部状态栏中短暂地显示了一个小的加载图标，然后什么也没有。获得链接响应的唯一方法是长按直到您获得Safari的“在新页面中打开/打开”对话框。另一方面，当我们点击其他一些链接时，新窗口将立即打开，如您所愿。如果在iPhone 4上尝试，您应该明白我的意思。

我已经仔细比较了HTML和正常工作的项目，以及比较狡猾的项目，除了内容不同外，它们看起来几乎是相同的。这是一个可以正常工作的标记示例:

<div style="padding-bottom:20px;border-bottom:1px solid #ccc;overflow:auto;">    
    <a target="_blank" href="http://yourworld.metro.co.uk/" style="text-decoration:none;color:#333333;font-family:Arial, Helvetica;">

        <img src="http://metrouk2.files.wordpress.com/2013/07/ay_113922733.jpg" style="float:left;margin-right:6px;" alt="directline" />

        <h1 style="font-size:1.7em;color:#193989;font-family:'CorpidBold', Arial, Helvetica, sans-serif;"> WIN PRIZES WITH YOUR PICS!</h1>    

        <p style="margin-bottom:10px;font-size:.9em;line-height:1.4em;">Every week in Metro’s Your World we'll set you a photo challenge and feature the best submissions in our digital editions. And, for the whole of July we're giving away Samsung Galaxy cameras AND Amazon vouchers for the best photos! Check out this week’s challenge and submit your photos here.</p>

        <p style="margin-bottom:10px;font-size:.9em;line-height:1.4em;"></p>

    </a>
</div>

这是一种奇怪的行为:

<div style="padding-bottom:20px;border-bottom:1px solid #ccc;overflow:auto;">
    <a target="_blank" href="http://intu.co.uk/lakeside/competition/metro" style="display:block;text-decoration:none;color:#333333;font-family:Arial, Helvetica;">

        <img src="http://metrouk2.files.wordpress.com/2013/11/comp-module.jpg" style="float:left;margin-right:6px;" alt="directline" />

        <h1 style="font-size:1.7em;color:#193989;font-family:'CorpidBold', Arial, Helvetica, sans-serif;"> WIN £2,000 to spend at intu Lakeside</h1>

        <p style="margin-bottom:10px;font-size:.9em;line-height:1.4em;">Every day this week, Metro is teaming up with intu Lakeside shopping centre to offer five lucky readers the chance to win a gift card with a whopping £2,000 to spend at the centre. For your chance to win, click here. Competition opens Monday 2nd December.</p>

        <p style="margin-bottom:10px;font-size:.9em;line-height:1.4em;"></p>

    </a>
</div>

谁能解释这种奇怪的情况或提出解决办法？我一直在其他链接上注意到类似的问题。也许这是一个iOS错误？

===============
编辑

我应该提一下，我尝试过更改列表中各项的顺序，以防页面上有一些不可见的元素阻碍了触摸事件。我还在测试WordPress网站的虚拟列表中添加了相同的项目。而且我尝试更改CSS，包括容器上的溢出样式以及h1和p标签中的文本。一切都没有改变。

===============
编辑

这与链接的href有关。当我将躲避项的href更改为与好项相同时，突然工作正常。奇怪的是，当我将href更改为http://google.com，http://yahoo.com或http://bbc.co.uk时，它停止工作。当我将其设置为http://metro.co.uk时，它可以工作。 WTF ???

Answer 1

我们似乎已经找到了解决办法-iOS Safari的弹出窗口阻止程序阻止了链接。一位同事在他的iPhone 5S上尝试了相同的页面，并且遇到了相同的行为。他还注意到，当他尝试在那里的链接时，他的台式机Chrome浏览器正在阻止弹出窗口。当我关闭iOS Safari中的弹出窗口阻止功能时，它们运行良好。另外，当我从链接中删除target =“_ blank”属性时，它们在弹出窗口阻止功能下仍能正常工作。使用JavaScript将target =“_ blank”添加到链接无济于事。

从该经验得出的结论是，iOS Safari阻止了具有_blank目标的外部链接。