Question

我想创建一个刷新div异步内容的页面，同时为用户提供一个锚点，以便能够直接访问div中的内容。（例如www.website.co.uk/#page1）

我已设法将内容更新为1页，但是，如果我添加多个页面则会停止工作

此外 - 如果我要导航到URL website.co.uk/#page1，它将不会显示＃page1。

有人可以帮忙吗？

这是我目前的代码：

HTML：

<h5> <a href="#page1">Test</a></h5>
<h5> <a href="#page2">Test2</a></h5>

JS：

<script type="text/javascript">
    var routes = {
        '#page1' : '{{site.url}}/page1'
        '#page2' : '{{site.url}}/page2'
    };
    var routeHandler = function( event ) {
        var hash = window.location.hash, 
            xhttp = new XMLHttpRequest();
        xhttp.onreadystatechange = function() {
            if (xhttp.readyState == 4 && xhttp.status == 200) {
                document.getElementById("div1").innerHTML = xhttp.responseText;
            }
        };
        xhttp.open("GET", routes[hash], true);
        xhttp.send();    
    };
    window.addEventListener('hashchange', routeHandler);
    window.addEventListener('load', function() {
        var hash = window.location.hash;
        if (routes.hasOwnProperty(hash)) routehandler();
    });
</script>

Answer 1

你犯了一些小js错误。所以这里是你固定的代码

<强> HTML ：

<h5> <a href="#page1">Test</a></h5>
<h5> <a href="#page2">Test2</a></h5>
<div id="div1"></div>

<强>的javascript：

  //change these routs
  var routes = {
    '#page1': '/page1.html',
    '#page2': '/page2.html'
  };

  var routeHandler = function() {

    xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
      if (xhttp.readyState == 4 && xhttp.status == 200) {
        document.getElementById("div1").innerHTML = xhttp.responseText;
      }
    };

    xhttp.open("GET", routes[window.location.hash], true);
    xhttp.send();

  };

  window.addEventListener('hashchange', routeHandler);
  window.addEventListener('load', function() {
    var hash = window.location.hash;
    if (routes.hasOwnProperty(window.location.hash)) routeHandler();
  });

Answer 2

您通常会使用类似路由器的对象。而不是您正在使用的超链接，将href设置为实际页面哈希<a href="#page1">Button Title</a>。然后为窗口对象上的hashchange创建一个事件侦听器，您将在其中获取内容。

最后添加一个您希望能够导航到的网页列表，这样您就可以翻译＃page1＆＃39;到实际网址。

结果是您可以在超链接中使用简单的hrefs，当前页面将显示在顶部的url栏中。

ps：在哈希变更监听器中添加一个检查列表中没有列出的路由，这样你仍然可以链接到非现场页面。

pps：如果您希望能够直接导航到某个页面，则需要在文档加载时添加对哈希的手动检查。

// html mockup
<a href="#page1">Button Title</a>
// js mockup
var routes = {
    '#page1' : '{{site.url}}/webpage.html'
};

window.addEventListener('hashchange', function( event ) {
    var hash = window.location.hash, // gives you '#page1'
        xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
        if (xhttp.readyState == 4 && xhttp.status == 200) {
            document.getElementById("div1").innerHTML = xhttp.responseText;
        }
    };
    xhttp.open("GET", routes[hash], true);
    xhttp.send();    
});

使用加载侦听器更新：

// html mockup
<a href="#page1">Button Title</a>
// js mockup
var routes = {
    '#page1' : '{{site.url}}/webpage.html'
};
var routeHandler = function( event ) {
    var hash = window.location.hash, // gives you '#page1'
        xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
        if (xhttp.readyState == 4 && xhttp.status == 200) {
            document.getElementById("div1").innerHTML = xhttp.responseText;
        }
    };
    xhttp.open("GET", routes[hash], true);
    xhttp.send();    
};
window.addEventListener('hashchange', routeHandler);
window.addEventListener('load', function() {
    var hash = window.location.hash;
    if (routes.hasOwnProperty(hash)) routehandler();
});

Answer 3

因为你用jquery标记了这个问题，所以你可以使用jQuery，在这种情况下你可以做类似的事情：

$(window).on('hashchange', refreshContent);

function refreshContent() {
    $.get(getBaseUrl() + location.hash, function(data) {
         $('#div1').html(data);
    });
}

但请注意，那里有更复杂的解决方案

Answer 4

我直接在onclick给出了它的工作。它可能对你有帮助。

<h5> <a href="#page1" onclick="test('#page1')">Test</a></h5>
<h5> <a href="#page2" onclick="test('#page2')">Test2</a></h5>
<div id="div1"></div>

<script type="text/javascript">

    var routes = {
        '#page1' : 'page1.html',
        '#page2' : 'page2.html'
    };
    function test(page) {

        xhttp = new XMLHttpRequest();
        xhttp.onreadystatechange = function() {
            if (xhttp.readyState == 4 && xhttp.status == 200) {
                document.getElementById("div1").innerHTML = xhttp.responseText;
            }
        };
        xhttp.open("GET", routes[page], true);
        xhttp.send();    
    }

</script>

我使用.html作为检查页面。你自己使用。

使用AJAX更改div内容 - 如何将导航显示为散列/锚点

4 个答案: