Javascript конфликтует с привязкой html

В настоящее время я создаю веб-сайт, на котором постоянный верхний и нижний колонтитулы. Чтобы сократить дублирование кода, я использую jquery для загрузки header.html и footer.html при загрузке каждой отдельной страницы.

Каждая html-страница, которая использует этот верхний и нижний колонтитулы, загружает его с кодом ниже.

<!-- Header and footer loading -->
<script> 
  $(function() {
    $("#header").load("header.html"); 
    $("#footer").load("footer.html");
  });
</script>

<div id="header">
  (header.html content rendered here)
</div>

Лучший способ объяснить следующую часть — перейти на сайт, на который я дал ссылку. Я хотел бы, чтобы кнопка раскрывающегося списка перенаправляла пользователя в определенный раздел страницы оборудования с любой другой страницы веб-сайта. Как вы видите, эта функция работает только в том случае, если пользователь уже находится на странице оборудования.

Из всего, что я читал, кросс-страничные привязки должны быть настроены так же, как и внутристраничные привязки. Используйте <a href="equipment.html#anchorname></a>, а затем свяжите его со страницей с помощью <a id="anchorname></a>. Однако этот подход работает только тогда, когда пользователь находится на той же странице, что и якорь. Я почти уверен, что это связано с синхронизацией механизма привязки и запуском кода jQuery.

Два моих вопроса...

  1. Может ли кто-нибудь объяснить последовательность происходящих событий, из-за которых мой якорь не работает.
  2. Что мне нужно сделать, чтобы мои межсайтовые привязки работали правильно?

Спасибо и дайте мне знать, если вам нужны конкретные фрагменты кода или у вас есть какие-либо вопросы.


javascript html jquery anchor
person Austin A    schedule 01.07.2015    source источник
comment
Я не заходил на сайт, создаю MCVE и размещаю его здесь, если вам нужна дополнительная помощь, НО якорь не является частью URL-адреса, он обрабатывается на стороне клиента, и браузер контролирует его поведение. Вы можете зафиксировать это в сценарии и делать все, что хотите. Нет проблем с привязкой ссылки, и это не имеет ничего общего с идентификаторами. 1 потенциальная проблема, которая у вас есть (если это не опечатка), заключается в том, что ваш атрибут id в теге a не закрыт.   -  person Amit    schedule 01.07.2015

Ответы (2)


arrow_upward
1
arrow_downward

Ваши межстраничные якоря работают точно так, как задумано. Рассмотрим вашу базовую HTML-страницу с отключенным JavaScript:

страница

Затем #gradalls или #trucks немедленно "прокрутит" до соответствующей привязки. Я говорю «прокрутить», потому что контента недостаточно для прокрутки в любом месте — страница будет просто стоять там, стационарная.

Затем ваша серия событий загрузки jQuery будет срабатывать следующим образом:

$(function() {
  $("#header").load("header.html"); 
  $("#footer").load("footer.html");
  $("#xl4100-99").load("xl4100_99.html");
  $("#xl4200-95").load("xl4200_95.html");
  $("#lowboy-93").load("lowboy_93.html");
  $("#gmctruck-93").load("gmctruck_93.html");
});

Они будут заполнять различные контейнеры на вашей странице, и содержимое будет расти вниз, однако страница не будет прокручиваться. Это уже произошло.

Решение 1

Лучшее решение, оптимизированное для SEO, — просто добавить контент на каждую страницу, а не загружать его динамически. На самом деле, в дополнение к вашим ключевым словам, симулятор поисковой системы увидит только

Dave Ankney Gradall Equipment Gradalls Прицепы Грузовики

и никаких ссылок. Потом может уйти надолго, потому что ничего вкусного там не было. Поскольку вы используете S3, вам нужно вручную включать контент на каждую страницу.

Решение 2

Либо так, либо используйте подходящую серверную часть, такую ​​как PHP, и в этом случае вы можете просто включить каждую часть HTML следующим образом:

<body>
  <div class="main">
    <div id="header"><?php include("header.php"); ?>
    </div>

(Только переименовать header.html в header.php)

Решение 3

Если вы действительно просто хотите, чтобы прыжок работал, вы можете изменить свой JS следующим образом:

<!-- Header and footer loading -->
<script>
$(function() {
  // Create Deferred instances that can be handed to $.when()
  var d1 = $.Deferred();
  var d2 = $.Deferred();
  // var d3 = 
  // var d4 = 

  // Set up a chain of events
  $.when(d1, d2).then(function() {
    // When everything has loaded, jump to the fragment
    var hash = window.location.hash
    if (hash !== "") {
      window.location.hash = hash;
    }
  });

  // Perform the load calls
  $("#header").load("header.html", function() { d1.resolve(); });
  $("#footer").load("footer.html", function() { d2.resolve(); });
  // ...
});
</script>

Надеюсь, это то, что вы ищете.

person Drakes    schedule 02.07.2015
comment
отличная запись! Когда я добавлял jQuery на страницу, я боялся, что он может конфликтовать со скребками. По какой-то причине я думал, что содержимое верхнего и нижнего колонтитула можно очистить, но после двойной проверки вы правы. Очевидно, что одной из основных функций этого сайта является привлечение клиентов через Интернет, поэтому мне придется переосмыслить использование jQuery. Это будет только статический сайт, поэтому опция php отключена. Я думаю, что ваше первое предложение является наиболее практичным. Есть ли какие-либо другие варианты, чтобы сократить повторное использование кода/html в этой ситуации, или мне нужно просто стиснуть зубы? - person Austin A; 02.07.2015
comment
Спасибо. Теперь, в прежние времена, когда мало кто серьезно использовал кодирование на стороне сервера, мы использовали такие инструменты, как Dreamweaver, для создания статических HTML-файлов с заголовками меню. Но для каждого изменения нам пришлось бы запускать DW и повторно загружать множество измененных файлов. Болезненный. - person Drakes; 02.07.2015
comment
Вам понадобится решение на стороне сервера, может быть, даже CMS, такая как WordPress, чтобы сделать это так просто. Кроме того, по соображениям SEO вам понадобится собственное доменное имя, чем короче, тем лучше (ваш сайт в основном является расширением Amazon, как его видит Google). Есть универсальные провайдеры, которые справляются со всем или, по крайней мере, предоставляют вам серверные инструменты, такие как PHP. Я использую GoDaddy для своих небольших сайтов. - person Drakes; 02.07.2015

arrow_upward
0
arrow_downward

это может помочь тебе

прочитайте URL-адрес и разделите URL-адрес на хэш-тег после полной загрузки страницы, вызовите метод ниже....

function scrollTo(hash) {
    location.hash = "#" + hash;
}
person Hassan    schedule 01.07.2015