錨標簽在 iPhone Safari 中不起作用

Question

我在 iPhone Safari 瀏覽器中遇到了命名錨標記的問題。 它適用於包括 Safari 在內的桌面瀏覽器，但不適用於移動 Safari。 奇怪的！

例如我的網址看起來像：

http://www.example.com/my-example-article-url-is-like.php#articlebottom

上面的 URL 來自時事通訊，它應該轉到文章頁面的底部段落，我給了這樣的 id：

<p id="articlebottom">paragraph is here</p>

當我從 Newsletter 單擊上面的 URL 時，它會轉到文章頁面，但不會轉到我指定 id 的底部段落。 雖然我可以看到，當它進入 Safari 中的目標頁面時，URL 中缺少 #articlebottom 部分。

任何想法將不勝感激！

Answer 1

Opera、IE、Chrome 和 Firefox 會將錨點轉移到新頁面。 但是，Safari 會丟失重定向的錨點。

那么，如果您在ID Tag之前添加/怎樣？

舊 URL 路徑： http://www.example.com/my-example-article-url-is-like.php#articlebottom : http://www.example.com/my-example-article-url-is-like.php#articlebottom

新 URL 路徑： http://www.example.com/my-example-article-url-is-like.php/#articlebottom : http://www.example.com/my-example-article-url-is-like.php/#articlebottom

另一種解決方案是您必須刪除兩個“www”。 並在 Safari 正確響應之前在 URL/路徑名中的anchor tag前添加正斜杠。 Firefox 似乎並不關心，我還沒有在 IE 上進行測試。

Answer 2

只是做盡職調查並回答任何在 Squarespace 頁面上的索引導航鏈接和 iOS 上的 Safari 上遇到此問題的人。 我的錨鏈接在格式化時不起作用：

http://sitename.com/page#anchor

然后我嘗試了這個無濟於事：

http://sitename.com/page/#anchor"

與其放棄，不如點燃我的電腦，然后我嘗試過：

http://www.sitename.com/page/#anchor

它奏效了！ 如果這對任何人有幫助，那么歡呼吧。

Answer 3

Safari 在重定向后丟失錨標記。 所以避免任何導致（第二個）重定向的事情。

• 使用完整的 URL ( http://... )
• 請注意是否有重定向到 www (www.domain ...)

• 添加尾隨 / 如果沒有像 .html/.php (mypage/) 這樣的前綴

  http://www.domain.tdl/mypage/#safari

也許使用 cURL 之類的工具檢查重定向很有用

curl -I http://www.domain.tdl/mypage/#safari

Answer 4

我無法使用上述解決方案，所以希望我做了我自己的解決方法。

目的：導航到 URL“https://example.com/issues/”后滾動到錨點“#issues”

1. 創建鏈接“https://example.com/issues?anchor=issues”
2. 在頁面“https://example.com/issues”上添加js

   <script>
       if (window.location.href.search("anchor=issues") > 0) {
           window.location.href= "https://example.com/issues/#issues";
       }
   </script>

瞧！

——

您可以觀察到打開鏈接“https://example.com/issues/#issues”后，Safari 從錨點滾動到頁面頂部，然后當您單擊編輯 URL 並點擊提交按鈕時，您將滾動到錨點.

我希望他們能快速修復它，然后他們會立即添加推送通知支持。

Answer 5

我一直在為我的一個客戶解決這個問題。 我不會說出名字，但我會分享一個我發現的解決方案，它突然讓死錨鏈接恢復生機，並在網站的移動和桌面版本上工作。

我將故障歸因於過多的頁面/站點腳本和 css，我無法更改，因為雖然該站點屬於本地企業，但它是擁有自己的協議和最佳實踐的全球企業網絡的一部分。 換句話說，我可以指定內聯樣式來區分頁面元素，但最終頁面必須符合公司指南和規則。

這是我的代碼片段，體現了我所學到的：

href="#anchorname" target="_top"

這里的關鍵是目標標簽_top

根據http://www.w3schools.com/tags/att_a_target.asp ，默認目標是 _self，而您的 html 生成器可能不會將特定的代碼寫入您的頁面，也就是說，因為它是默認的不必指定，我的研究表明，通過將 _top 指定為目標，解決了死鏈接問題。

我希望這個解決方案對你有用。