外部鏈接在iOS中不起作用

Question

我們的網站在WordPress上運行。 在這個頁面上，我們有一系列文本小部件，每個小部件包含一大塊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時，它的工作原理。 跆拳道???

Answer 1

我們似乎找到了答案 - iOS Safari的彈出窗口攔截器阻止了鏈接。 一位同事在他的iPhone 5S上嘗試了相同的頁面並遇到了同樣的行為。 他還注意到他的桌面Chrome在嘗試鏈接時阻止了彈出窗口。 當我在iOS Safari中關閉彈出窗口阻止時，它們運行良好。 此外，當我從鏈接中刪除target =“_ blank”屬性時，它們在彈出窗口阻塞時工作正常。 使用JavaScript向鏈接添加target =“_ blank”沒有幫助。

此體驗的結論是iOS Safari阻止了帶有_blank目標的外部鏈接。

Answer 2

在iOS上，Safari移動版呈現內容。 它的行為與桌面游獵非常不同。 我認為錯誤始於使用移動safari無法理解的命令。 在您的代碼溢出中：auto就是其中之一。 但是請看這里接受的解決方案： 在移動safari中忽略Overflow-x值

此外，如果您使用的是javascript note，並非所有事件都由移動版Safari處理。 如果你注意到奇怪的行為，我會首先圍繞這些問題展開調查。 例如。 有些事件根本沒有開火，或者他們因為沒有實施而立即開火。 這是一個非常深的兔子洞imho。

我希望它有所幫助。