跟随锚点到另一个页面上的内容，直到 DOM 准备好后才创建

发布于 2024-08-23 22:50:56 字数 814 浏览 2 评论 0原文

归结起来，我有两页。简单地说，它们可以用这种方式表示。

第 1 页

<html>
    <a href="page-2.html#section-A">Link to section A</a>
</html>

第 2 页

<html>
    <script>        
        // Assume jQuery
        $(document).ready(function(){
            $('#wrapper').append($('<a name="section-A">Here is Section A</a><p>Some more content here.</p>'));
        });
    </script>
    <div id="wrapper"></div>
</html>

问题在于，当您单击第 1 页中该 url 中的链接时，请说“http://www.mydomain.com/page-2.html#section-A"，但锚链接到的内容直到 DOM 加载后才会生成，考虑到 URL 首先加载，这已经太晚了。

如果问题不清楚，请告诉我，我将尝试进一步澄清，但如果有人对如何实现这样的场景有任何初步想法，请告诉我。

原文

To boil it down, I have two pages. Simplified, they could be represented this way.

Page 1

<html>
    <a href="page-2.html#section-A">Link to section A</a>
</html>

Page 2

<html>
    <script>        
        // Assume jQuery
        $(document).ready(function(){
            $('#wrapper').append($('<a name="section-A">Here is Section A</a><p>Some more content here.</p>'));
        });
    </script>
    <div id="wrapper"></div>
</html>

The problem with this is that when you click on the link in Page 1 that url, say "http://www.mydomain.com/page-2.html#section-A" is followed, yet the content that the anchor links to is not generated until after the DOM loads, which is too late considering that the URL is loaded first.

If the problem isn't clear let me know and I will attempt to clarify further, but if anyone has any initial thoughts on how to get a scenario like this working please let me know.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

东风软 2024-08-30 22:50:56

在第二页中，“就绪”处理程序中的代码可以检查页面位置。如果该位置中有类似“#wrapper”的内容，那么您的 JavaScript 可以重置该位置。

$(document).ready(function(){
  $('#wrapper').append($('<a name="section-A">Here is Section A</a><p>Some more content here.</p>'));
  if (document.location.hash === '#wrapper')
    document.location.hash = '#wrapper';
});

我会尝试一下，看看它是否真的有效。 :-)

编辑好的，这是一个测试页面： http://gutfullofbeer.net/hash1 .html

有两个链接：一个包含哈希值（在我的例子中为“#hello”），另一个则没有。当您单击第二个时，您会注意到页面底部看到“hello”部分。当您单击第一个时，您将转到同一页面，但“hello”部分将不可见（除非您的浏览器窗口非常大）。

In the second page, the code in your "ready" handler can check the page location. If the location has something like '#wrapper' in it, then your javascript can reset the location.

$(document).ready(function(){
  $('#wrapper').append($('<a name="section-A">Here is Section A</a><p>Some more content here.</p>'));
  if (document.location.hash === '#wrapper')
    document.location.hash = '#wrapper';
});

I'll try this out to see if it actually works. :-)

edit OK here's a test page: http://gutfullofbeer.net/hash1.html

There are two links: one has the hash in it ('#hello' in my case) and one doesn't. When you click the second one, you'll notice that you see the "hello" section at the bottom of the page. When you click the first one, you go to the same page but the "hello" section won't be visible (unless your browser window is really gigantic).

回复收藏 0 原文

~没有更多了~