Question

我在主HTML中包含了多个HTML。
首次输入浏览器网址

indexTest.html#BTestStart

页面无法跳转到#BTestStart锚链接，
嵌套在包含的html中。

但是如果我在网址对话框中再次按Enter键
然后页面跳转到#BTestStart锚链接。

我的问题是，
如何获取页面以跳转到#BTestStart锚链接
输入的网址是第一个（不是第二个）？

谢谢您的任何建议。

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>

Answer 1

以下是页面加载时发生的时间轴： 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];
}

Answer 2

<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基础知识
我花了数小时在网上寻找线索...

html首先跳转到包含的锚链接URL

2 个答案: