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

Question

I have included multiple html in a master html.我在主 html 中包含了多个 html。
When I first enter the browser url当我第一次输入浏览器网址时

indexTest.html#BTestStart

the page does not jump to the #BTestStart anchor link,页面没有跳转到#BTestStart 锚链接，
which is nested in an included html.它嵌套在包含的 html 中。

But if I press enter again in the url dialog但是如果我在 url 对话框中再次按 Enter
the page then jumps to #BTestStart anchor link.然后页面跳转到#BTestStart 锚链接。

My question is,我的问题是，
how can I get the page to jump to the #BTestStart anchor link如何让页面跳转到#BTestStart 锚链接
when url is first (not second) entered ?当第一个（而不是第二个）输入 url 时？

Thank you for any suggestions.谢谢你的任何建议。

indexTest.html 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 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测试.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

Here is a timeline of what's happening when the page loads: 1. The browser obtains indexTest.html from the server 2. The browser processes the anchor link in the url (the #BTestStart portion) and is unable to find the anchor so it ignores it.以下是页面加载时发生的情况的时间表： 1. 浏览器从服务器获取 indexTest.html 2. 浏览器处理 url 中的锚链接（#BTestStart 部分），但无法找到锚，因此忽略它。 3. The browser begins execution of the page's javascript and begins rendering the page. 3. 浏览器开始执行页面的 javascript 并开始呈现页面。 4. The javascript inserts the contents of the other files into the page. 4. javascript 将其他文件的内容插入到页面中。 5. The browser isn't jumping to that anchor because it doesn't exist when the browser first loads the page. 5. 浏览器不会跳转到那个锚点，因为当浏览器第一次加载页面时它不存在。 6. You reinput the url and it doesn't reload the page because it's the same url, but it does reprocess the url and find the anchor and jump to it 6. 您重新输入 url 并且它不会重新加载页面，因为它是相同的 url，但它会重新处理 url 并找到锚点并跳转到它

A way to get around this would be to write a function that after all external portions of the page are loaded would tell the browser to reprocess the url.解决这个问题的一种方法是编写一个函数，在页面的所有外部部分加载后，它会告诉浏览器重新处理 url。

This function will do the equivalent of selecting the url and pressing return.该函数相当于选择 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>

This kinda works, but it requires the这有点工作，但它需要
extra step of the user clicking on the alert.用户点击警报的额外步骤。

I know there is a simple solution to this issue,我知道这个问题有一个简单的解决方案，
but with lack of javascript fundamentals但缺乏 javascript 基础知识
I've spent hours online searching for clues ...我花了几个小时在网上寻找线索......

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

问题描述

2 个解决方案

解决方案1
0 2019-01-06 01:24:12

解决方案2
0 2019-01-11 23:44:45

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

问题描述

2 个解决方案

解决方案1 0 2019-01-06 01:24:12

解决方案2 0 2019-01-11 23:44:45

解决方案1
0 2019-01-06 01:24:12

解决方案2
0 2019-01-11 23:44:45