锚标签在 iPhone Safari 中不起作用

Question

我在 iPhone Safari 浏览器中遇到了命名锚标记的问题。它适用于包括 Safari 在内的桌面浏览器，但不适用于移动 Safari。奇怪！

例如，我的 URL 如下所示：

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

上面的 URL 来自时事通讯，它应该转到文章页面的底部段落，我给了这样的 id：

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

当我从 Newsletter 点击上面的 URL 时，它会转到文章页面，但不是我指定 id 的底部段落。虽然我可以看到#articlebottom 部分在进入 Safari 中的目标页面时从 URL 中丢失。

任何想法将不胜感激！

Answer 1

我无法让它与上述解决方案一起使用，所以希望我自己做了解决方法。

目的：导航到 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 2

我一直在为我的一个客户解决这个问题。我不会点名，但我会分享一个我发现的解决方案，它突然让死锚链接恢复生机，并且可以在移动版和桌面版网站上运行。

我将故障归因于页面/站点脚本和 css 过多，我无法更改，因为虽然此站点属于本地企业，但它是具有自己的协议和最佳实践的全球企业网络的一部分。换句话说，我可以指定内联样式来区分页面元素，但最终页面必须符合公司准则和规则。

这是我的代码的 sn-p，它体现了我所学到的：

href="#anchorname" target="_top"

这里的关键是目标标签_top

根据http://www.w3schools.com/tags/att_a_target.asp，默认目标是 _self，而您的 html 生成器可能不会将特定代码位写入您的页面，也就是说，因为它是默认的，所以不必指定，我的研究有表明通过将 _top 指定为目标，死链接问题得到了解决。

我希望这个解决方案对你有用。

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

只是尽我的职责并为任何在 Squarespace 页面上的索引导航链接和 iOS 上的 Safari 上遇到此问题的人回答。我的锚链接在这样格式化时不起作用：

http://sitename.com/page#anchor

然后我尝试了这个无济于事：

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

与其放弃，不如点燃我的电脑，然后收工：

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

它奏效了！如果这对任何人有帮助，那就欢呼吧。

Answer 5

Opera、IE、Chrome 和 Firefox 会将锚点转移到新页面。但是，Safari 会丢失重定向的锚点。

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

旧网址路径： 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 上进行测试。