[英]Using AJAX to load page into a div at a specific anchor
我在這里看到了與此相關的一些問題,但是我沒有看到我正在談論的確切情況,所以我想問一下。
我有一個包含兩個div的頁面。 一個sidenav div( sidediv
)和一個主體( maindiv
)div。
我想要的是:單擊側面導航欄中的鏈接以在主div中加載頁面。 無論如何,此刻始終是同一頁面,但它是一個包含多個錨點的巨大頁面。 側面的項目鏈接到各種錨點。
我在做什么:我的sidenav鏈接如下所示:
<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,BTW,我目前不在網站上使用它,也不希望一件事將其加載進來)
謝謝。
好的,這很有趣,所以我為您拍攝了照片。 這是我想出的。 它使用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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.