После привязки к контенту на другой странице, которая не создается до тех пор, пока DOM не будет готов

Чтобы свести это, у меня есть две страницы. Упрощенно, они могут быть представлены таким образом.

Страница 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", но содержание, на которое ссылается якорь to не генерируется до тех пор, пока не загрузится DOM, что слишком поздно, учитывая, что URL загружается первым.

Если проблема не ясна, дайте мне знать, и я постараюсь уточнить, но если у кого-то есть какие-то первоначальные мысли о том, как получить такой сценарий, как этот, пожалуйста, сообщите мне.

Источник

1 ответ

На второй странице код в вашем "готовом" обработчике может проверить местоположение страницы. Если в местоположении есть что-то вроде "#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"), а вторая - нет. Когда вы нажмете на второй, вы увидите, что вы видите раздел "Привет" в нижней части страницы. Когда вы нажимаете на первую страницу, вы переходите на ту же страницу, но раздел "привет" не будет виден (если окно вашего браузера действительно не гигантское).

Источник
Другие вопросы по тегам