锚标签在 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 指定为目标，解决了死链接问题。

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