html перейти сначала к включенной ссылке ссылки - PullRequest
Новая
       22

html перейти сначала к включенной ссылке ссылки

0 голосов
/ 06 января 2019


Я включил несколько HTML в основной HTML.
Когда я впервые ввожу URL браузера 

indexTest.html#BTestStart

страница не переходит на ссылку привязки #BTestStart,
который вложен во включенный html.

Но если я снова нажму Enter, в диалоговом окне URL
страница переходит на якорную ссылку #BTestStart.

Мой вопрос,
как я могу получить страницу, чтобы перейти к якорной ссылке #BTestStart
когда первый (не второй) URL-адрес введен?

Спасибо за любые предложения.

indexTest.html 

<!doctype html>

<head>

<script>
function includeHTML() {
  var z, i, elmnt, file, xhttp;
  /*loop through a collection of all HTML elements:*/
  z = document.getElementsByTagName("*");
  for (i = 0; i < z.length; i++) {
    elmnt = z[i];
    /*search for elements with a certain atrribute:*/
    file = elmnt.getAttribute("IH");
    if (file) {
      /*make an HTTP request using the attribute value as the file name:*/
      xhttp = new XMLHttpRequest();
      xhttp.onreadystatechange = function() {
        if (this.readyState == 4) {
          if (this.status == 200) {elmnt.innerHTML = this.responseText;}
          if (this.status == 404) {elmnt.innerHTML = "Page not found.";}
          /*remove the attribute, and call this function once more:*/
          elmnt.removeAttribute("IH");
          includeHTML();
        }
      }
      xhttp.open("GET", file, true);
      xhttp.send();
      /*exit the function:*/
      return;
    }
  }
}
</script>

</head>

<body>

<h1 id="ATestStart" IH="ATest.html"></h1>
<h1 id="BTestStart" IH="BTest.html"></h1>

</body>
</html>

<script>
includeHTML();
</script>

ATest.html 

<!doctype html>
<h2 id="ATestStart">ATestStart</h2>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<h2 id="ATestMid">ATestMid</h2>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<h2 id="ATestEnd">ATestEnd</h2>

BTest.html 

<!doctype html>
<h2 id="BTestStart">BTestStart</h2>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<h2 id="BTestMid">BTestMid</h2>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<h2 id="BTestEnd">BTestEnd</h2>

Ответы [ 2 ]

0 голосов
/ 12 января 2019 
<script>
alert("Page Reload Required")
if(localStorage.getItem("reload") != "1"){
    localStorage.setItem("reload","1");
    window.location.href = window.location.href;
}
else{
    localStorage.removeItem("reload");
}
</script>

Это вроде работает, но требует
дополнительный шаг пользователя, нажимающего на предупреждение.

Я знаю, что есть простое решение этой проблемы,
но с отсутствием основ javascript
Я провел часы в Интернете в поисках улик ...

0 голосов
/ 06 января 2019

Вот график того, что происходит при загрузке страницы: 1. Браузер получает indexTest.html с сервера 2. Браузер обрабатывает ссылку привязки в URL (часть #BTestStart) и не может найти привязку, поэтому игнорирует ее. 3. Браузер начинает выполнение javascript страницы и начинает рендеринг страницы. 4. Javascript вставляет содержимое других файлов на страницу. 5. Браузер не переходит на этот якорь, потому что он не существует, когда браузер впервые загружает страницу. 6. Вы повторно вводите URL-адрес, и он не перезагружает страницу, потому что это тот же URL-адрес, но он повторно обрабатывает URL-адрес, находит привязку и переходит к ней

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

Эта функция будет эквивалентна выбору URL и нажатию кнопки возврата. 

function recheckURL(){
    var currentUrl = document.URL,
    urlParts = currentUrl.split('#');
    var url = urlParts[0] + (urlParts.length > 1) ? "# " + urlParts[1] : "";
    if (urlParts.length > 1) location.href = "#"+urlParts[1];
}
...