使用 AJAX 将页面加载到特定锚点的 div

Question

我在这里看到了一些与此相关的问题，但我没有看到我所说的确切情况，所以我想我会问。

我有一个包含两个 div 的页面。一个sidenavdiv(sidediv)和一个主体(maindiv)div.

我想要的：单击侧面导航中的 link 以在主 div 中加载页面。目前，无论如何，它始终是相同的页面，但它是一个带有多个锚点的巨大页面。旁边的项目 link 到不同的锚点。

我在做什么：我的 sidenav link 看起来像这样：

<a href="#" onclick="loadPage('mypage.html#ds'); return false;">Desired Section</a>

和 JS：

function loadPage(url){
    var xhr= new XMLHttpRequest();
    xhr.open('GET', url, true);
    xhr.onreadystatechange= function() {
        if (this.readyState!==4) return;
        if (this.status!==200) return; 
        document.getElementById('maindiv').innerHTML= this.responseText;
    };
    xhr.send();
}

发生了什么：它加载 mypage.html 很好，但拒绝转到锚点。

我如何做到这一点（没有 jQuery，顺便说一句，我目前没有在现场使用它，而且不想加载它一件事）

谢谢。

Answer 1

好的，这很有趣，所以我试了一下。这是我想出的。它使用 scrollIntoView。还要记住，我模拟了 ajax 调用，所以我的 loadPage 函数做了一些与您不同的事情。

var pages = {
    'mypage.html': '<div id="ts" class="page">my stuff</div><div id="ds" class="page">my more stuff</div><div id="eds" class="page">my even more stuff</div>',
    'yourpage.html': '<div id="ts" class="page">your stuff</div><div id="ds" class="page">your more stuff</div><div id="eds" class="page">your even more stuff</div>'
};

function loadPage(url) {
    var set = url.split('#'),
        page = set[0],
        id = set[1];

    // simulate xhr request
    setTimeout(function() {
        document.getElementById('maindiv').innerHTML = pages[page];
        document.getElementById(id).scrollIntoView();
    }, 1000);
}

.page {
  height: 400px;
}

.menu {
  width: 200px;
  float: left;
  position: fixed;
}

#maindiv {
  width: 50px;
  float: right;
  background: lightblue;
}

<div class="menu">
    <a href="#" onclick="loadPage('mypage.html#ds'); return false;">My Page #ds</a><br />
    <a href="#" onclick="loadPage('yourpage.html#eds'); return false;">Your Page #eds</a>
</div>

<div id="maindiv">
</div>

使用 AJAX 将页面加载到特定锚点的 div

Using AJAX to load page into a div at a specific anchor

javascript

ajax

anchor