javascript - 具有历史实现和主题标签功能的 ajax 页面加载内容

问题描述

我正在扩展基于 ajax 加载器的功能，比如这个猫加载器和这个mia 加载器

如果我有使用锚的页面，我似乎无法粉碎错误

<a href="#footer">Contacto</a>

Ajax 页面像这样加载，（有点因为从 json 检索）目标页面在数据上-

//<a data-mia="home" href="/home">Home</a>
if ( el.getAttribute('data-mia') in pages ){
        el.addEventListener('click', clickHandler, true);

滚动在中间停止，而不是完全到底部。我相信是因为 popstate 被解雇了。

我可以拥有前进和后退按钮功能并破坏主题标签，反之亦然，但我无法同时做到这两点。我们不能在 2020 年之前做到这一点吗？

这是我尝试过的一些事情，注释掉了：

// Revert to a previously saved state
window.addEventListener('popstate', function(event) {
    console.log('popstate fired!');
    //console.log(history.state);
    // if prevents hashes/anchor scroll navigation in same url bugging
    // var w = window.location+"";
    // if (!w.lastIndexOf('#') > 0)
        updateContent(event.state);
});

添加这个我也尝试过，但似乎不是这样，或者我错过了如何与正确的前一个结合：

 window.addEventListener('hashchange', function() {
      console.log('The hash has changed!');
      event.preventDefault();
      // nasty hack #footer for contact link.
      // if (window.location.lastIndexOf('#footer') > 0)
      document.querySelector('#footer').scrollIntoView();
    }, false);

现在有了这样的 2 个，锚点和 ajax 加载工作，但是当涉及#hashes 时 fwd/back 被窃听。像这样：

导航：/page1 /2 /2#footer /3

返回：/3 /2#footer（不去锚定）/2（去这里锚定）...

我不想诉诸 onclick 事件

<a onclick"js:goto('footer')" href="#footer">Contacto</a>

遵循完整的代码片段示例。

var pages = [];
var home_title = $(document).attr('title');
var home_meta_desc = $('meta[name="description"]').attr('content');

pages = {
  "1": {
    "title": "title 1 ",
    "meta_desc": "meta 1",
    "file": "1 file"
  },
  "2": {
    "title": "title 12 ",
    "meta_desc": "meta 12",
    "file": "12 file"
  },
  "3": {
    "title": "title 3 ",
    "meta_desc": "meta 3",
    "file": "3 file"
  },
  "4": {
    "title": "title 4 ",
    "meta_desc": "meta 4",
    "file": "4 file"
  }
};

els = document.querySelectorAll('[data-mia]');
els.forEach(function(el) {
  if (el.getAttribute('data-mia') in pages) {
    el.addEventListener('click', clickHandler, true);
  }
});



function updateContent(data) {
  document.querySelector('#one').scrollIntoView();
  //$( "#one" ).fadeOut(); //
  $("#one > .inner").hide();

  console.log("updating content", data);
      if (data == null) {
        console.log('home content triggered updt content');

        $(document).prop('title', home_title);
        $("meta[name='description']").attr("content", home_meta_desc);
        $('#one').text(data.file); //$( "#one > .inner" ).fadeIn(100).load( "blog/home.html " );
        return;
    }

  $(document).prop('title', data.title);
  $("meta[name='description']").attr("content", data.meta_desc);
  $('#one').text(data.file); //$("#one > .inner").fadeIn(300).load("blog/" + data.file + ".html");
}

// Load some mock JSON data into the page
function clickHandler(event) {
  var cat = event.target.getAttribute('href').split('/').pop(),
    data = pages[cat]; // || null; // In reality this could be an AJAX request
  console.log("clickHandler data:", data);

  updateContent(data);

  // Add an item to the history log
  history.pushState(data, event.target.textContent, event.target.href);

  return event.preventDefault();
}

// Revert to a previously saved state
window.addEventListener('popstate', function(event) {
  console.log('popstate fired!');
  //console.log(history.state);
  // if prevents hashes/anchor scroll navigation in same url bugging
  // var w = window.location+"";
  // if (!w.lastIndexOf('#') > 0)
  updateContent(event.state);
});

window.addEventListener('hashchange', function() {
  console.log('The hash has changed!');
  event.preventDefault();
  // nasty hack #footer for contact link.
  // if (window.location.lastIndexOf('#footer') > 0)
  document.querySelector('#footer').scrollIntoView();
}, false);

// Store the initial content so we can revisit it later
//console.log("hist pre", history.state);
history.replaceState(null, document.title, document.location.href);

//console.log("hist post ", history.state);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav id="nav">

  <a data-mia="1" href="/1">Home</a>
  <a data-mia="2" href="/2">Manual</a>
  <a data-mia="3" href="/3">Not only 3</a>

  <a data-mia="4" href="/4">Fotos</a>
  <a href="#footer">Contacto</a>
  <!-- onclick="document.querySelector('#footer').scrollIntoView({ behavior: 'smooth' })"  -->

</nav>

<section id="one">
  <div class="inner">
    server load content['body'];

  </div>
</section>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sollicitudin nunc vel libero malesuada semper. Praesent porttitor tincidunt finibus. Morbi elementum massa vitae quam eleifend, eget dignissim diam tempus. Pellentesque habitant morbi tristique
senectus et netus et malesuada fames ac turpis egestas. Morbi non iaculis nunc. Cras ac sollicitudin erat, nec pharetra ipsum. Proin in condimentum est, eget ullamcorper orci. Cras accumsan ante leo, et sodales orci tempor sed. Pellentesque feugiat ac
urna quis rhoncus. Pellentesque convallis lorem libero, et tincidunt nibh varius ac. Maecenas magna urna, mattis at aliquam semper, hendrerit sed libero. Sed feugiat risus mi, ut tempor justo sodales in. Duis justo diam, viverra eu sodales nec, accumsan
non ex. Fusce sed suscipit sem. Donec a nibh suscipit, blandit felis vitae, consectetur metus. Maecenas faucibus odio id vulputate accumsan. Fusce porta non enim vel rutrum. Vestibulum ullamcorper fermentum eleifend. Proin ullamcorper placerat purus sed
tempor. Suspendisse suscipit suscipit urna quis placerat. Maecenas at justo pulvinar, varius nunc non, dictum justo. Curabitur in mollis tortor, at consequat ante. Duis commodo tellus neque, id molestie dui pellentesque ut. Quisque nec felis quis nulla
sollicitudin finibus. Fusce mattis mauris quis est pulvinar, sed interdum nisl pharetra. Morbi dictum, mi vitae viverra rhoncus, nibh ex varius magna, vel tincidunt erat odio ultrices tellus. Maecenas feugiat nibh quis lectus sodales, vel fringilla nulla
tincidunt. Phasellus condimentum rhoncus feugiat. Nam vel condimentum purus, et venenatis odio. Nam nisl tortor, faucibus in egestas vel, lacinia quis massa. Curabitur vel consectetur leo. Mauris sed imperdiet nunc. Nam enim eros, accumsan sit amet pulvinar
id, bibendum sit amet neque. Ut magna nulla, lobortis in imperdiet et, sagittis at enim. Etiam malesuada eu felis id consectetur. Nulla libero eros, fringilla ac consectetur non, efficitur a massa. Praesent ornare, ex id vulputate suscipit, dolor neque
eleifend magna, a posuere tellus justo sollicitudin massa. Pellentesque at mollis magna, at dapibus orci. Suspendisse sagittis libero quis augue accumsan euismod ut a arcu. Nulla sit amet nulla at augue imperdiet rhoncus id a mi. Morbi eu elementum augue,
eget luctus ex. Vivamus neque neque, tristique at bibendum et, posuere vel ligula. Vestibulum nec scelerisque erat, at fermentum massa. Donec et nulla rhoncus, ullamcorper enim vitae, convallis odio. Etiam consequat mauris leo, gravida consequat ex porta
vel. Mauris sed dignissim risus. Sed risus tellus, ullamcorper eu neque quis, rhoncus pulvinar massa. Suspendisse arcu tellus, varius sed luctus vel, viverra vel ex. Nullam ac mi eros. Proin ac volutpat orci, quis ornare augue. Donec a ultrices nunc.
Curabitur at aliquet augue. Aenean pharetra placerat sem. Donec blandit euismod ipsum, a cursus lorem fringilla ut. Nulla sed feugiat metus. Nam mollis, massa vel viverra lobortis, odio purus convallis mauris, ac accumsan sem turpis eu urna. Aliquam vel
lacus non dolor tempus lacinia in eget ante. Phasellus congue erat eu interdum luctus. Sed non sapien finibus, porta augue quis, luctus sapien. Praesent euismod porta nisi, nec volutpat metus hendrerit sed. Aenean gravida sed sem in consequat. Donec non
nisi euismod, fermentum nibh bibendum, pellentesque lorem. Vestibulum at placerat nulla. Ut sodales nulla at tincidunt blandit. Nulla non elit non nisl aliquet luctus. Nam lacinia justo ac ipsum finibus, non pellentesque ante hendrerit. Duis auctor auctor
tincidunt. Morbi porta odio id arcu tristique, vel finibus felis tristique. Nulla maximus ullamcorper augue, ut efficitur enim sagittis at. Fusce vitae lorem mi. Maecenas ultrices nisl et nibh feugiat vehicula. Ut dignissim placerat arcu, pellentesque
varius tortor. Quisque egestas massa dui. Vestibulum finibus interdum est, a porttitor diam scelerisque at. Donec egestas dui sed orci consectetur, quis tincidunt dolor lobortis. Duis mollis leo sed velit varius, ut laoreet turpis accumsan. Sed ac neque
eu nisl porta eleifend. In turpis urna, dignissim at convallis vel, luctus nec lectus. Nullam in mi laoreet, euismod urna ut, sagittis libero. Nam iaculis, metus vehicula tempus cursus, arcu turpis imperdiet orci, id posuere nulla mi vel dui. Aenean tempus
sit amet ligula vel ultricies. Quisque ac tortor bibendum sapien consectetur blandit in at felis. Vivamus consectetur velit tincidunt, eleifend augue vel, gravida quam. In at sodales purus. Aenean pulvinar sapien at ante viverra scelerisque. Duis nulla
diam, efficitur sit amet enim a, ornare tempus libero. Maecenas vitae lacinia ipsum. Nunc elementum mollis consequat. Duis dapibus vehicula purus, ac rhoncus diam interdum et. Quisque lacinia sit amet elit non ornare. Ut at tellus aliquam, sodales dui
sed, placerat leo. Aliquam erat volutpat. Nunc interdum egestas lacus sit amet eleifend. Donec ultrices, diam vitae imperdiet dignissim, metus purus accumsan quam, eget vehicula lorem diam rhoncus magna. Vestibulum ante libero, aliquet fringilla pretium
at, ultricies sed massa. Pellentesque vulputate ut nisl a egestas. Aliquam faucibus est et ligula ultrices, vitae tempor enim fringilla. Sed nunc nulla, lobortis in leo eu, sollicitudin vestibulum eros. Vestibulum ante ipsum primis in faucibus orci luctus
et ultrices posuere cubilia Curae; Donec a erat vel lacus porttitor euismod rhoncus sit amet diam. Suspendisse pharetra dui quis tempor commodo. Cras tristique, ligula non venenatis sagittis, sapien justo consectetur nisi, ac suscipit sem turpis in nisi.
Maecenas leo lacus, lobortis a suscipit at, fermentum sit amet lacus. Nam mattis, augue vitae consectetur dapibus, leo lacus consequat mi, at placerat tellus orci sed nisi. Donec imperdiet vehicula metus vel venenatis. Sed finibus a tellus eu laoreet.
Mauris mattis magna tellus, quis lobortis lacus facilisis eget. Sed eu luctus ante, a porttitor est. Nunc et lobortis lacus. Duis eu volutpat lectus, et convallis nisl. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
Phasellus condimentum auctor tortor, id molestie libero tincidunt sed. Duis vitae felis sit amet tellus malesuada gravida congue in mauris. Mauris rutrum placerat tincidunt. Suspendisse cursus pharetra finibus. Nulla laoreet turpis ac ante luctus, vitae
luctus turpis pharetra. Duis a congue ligula. Cras commodo urna sit amet ante maximus iaculis. Duis sollicitudin lobortis faucibus. Etiam mauris sem, blandit at finibus eu, congue sed felis. Vivamus aliquam massa eget turpis fermentum ornare. Sed lobortis
aliquet est, eget fermentum lorem sagittis at. Suspendisse dui risus, interdum eu massa vel, fermentum iaculis mi. Nullam sed quam ut quam pretium mattis. Donec vel ornare nisi. Morbi dapibus arcu id gravida ultrices. Donec ullamcorper metus id ex volutpat
porta. Donec sollicitudin ante pharetra orci rutrum hendrerit pellentesque vel nibh. Nulla pharetra imperdiet mi, non fringilla neque interdum in. Nam fermentum augue vitae facilisis feugiat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
posuere cubilia Curae; Nunc imperdiet mi eget quam tristique aliquam. Phasellus vel semper nibh, in imperdiet justo. Maecenas efficitur pretium erat, quis fringilla magna malesuada ac. Etiam pretium cursus vulputate. Sed sit amet euismod ante. Aliquam
interdum nulla sit amet lacus gravida, ac malesuada libero ullamcorper. Ut volutpat enim a elit pharetra, sit amet efficitur dui porttitor. Nam erat orci, elementum eu fermentum nec, tempor id odio. Morbi id imperdiet leo, sit amet ultrices diam. Maecenas
sed accumsan tortor, ut sollicitudin neque. Nulla mi nunc, egestas in ex at, cursus finibus ligula. Sed bibendum porttitor lectus a ornare. Pellentesque augue tellus, rhoncus sed molestie a, hendrerit et dolor. Donec malesuada pretium libero et cursus.
Nunc tristique molestie orci, vitae lacinia augue. Maecenas molestie porttitor dui nec blandit. Pellentesque et pulvinar diam, eget vehicula neque. In quis ligula sit amet nisl condimentum ornare sit amet eu purus. Donec et commodo augue, nec volutpat
nisi. Nulla ullamcorper et libero id viverra. Aliquam lobortis, libero sit amet maximus faucibus, sapien nisi imperdiet enim, quis fermentum nulla velit eu ipsum. Sed non urna at quam imperdiet rutrum sed in leo. Curabitur at lectus condimentum, maximus
augue at, bibendum tellus. Nulla varius eros facilisis, pretium ante at, dignissim urna. Ut in malesuada diam. Fusce a nulla lacinia, tincidunt dolor vitae, luctus eros. Cras consequat a purus quis elementum. Quisque finibus fermentum cursus. Vestibulum
bibendum, purus id vestibulum pulvinar, nulla ante ullamcorper nisl, vitae dictum dolor ipsum in neque. Sed arcu massa, aliquet lacinia magna ac, aliquet finibus ex. Nam imperdiet dignissim turpis at laoreet. Proin nisl felis, varius sed facilisis ac,
maximus sit amet ante. Ut accumsan erat id iaculis condimentum. Curabitur consectetur ultricies lorem vel dignissim. Sed rutrum ante felis, vel venenatis massa pulvinar at. Sed consectetur sed erat vitae accumsan. Maecenas malesuada neque a lorem fringilla,
sed elementum quam posuere. Sed interdum tempus nulla at cursus. In non tristique est. Nulla bibendum purus lorem, non consequat nibh feugiat sit amet. Mauris ultrices enim eros, eu ornare est molestie molestie. Duis in ipsum ut augue rutrum semper volutpat
ultrices nulla. Phasellus gravida tempus nisi eu luctus. Cras volutpat, massa eu facilisis accumsan, dui turpis ullamcorper ligula, eget porta lectus purus id odio. Duis nulla felis, dictum ac nisl ut, aliquet cursus urna. Curabitur metus mi, iaculis
nec sapien in, aliquet dapibus metus. Nunc a risus semper orci ultrices venenatis facilisis eu mi. Mauris sodales aliquet neque eu tempor. Nulla in nisl lacinia, ultricies arcu placerat, tincidunt nunc. Quisque rutrum, urna id dictum tincidunt, purus
neque aliquam ex, nec accumsan ante metus et risus. Quisque facilisis, nisi viverra accumsan dignissim, orci urna fringilla turpis, quis tempor lorem arcu vel risus. Ut sit amet finibus tellus, vel congue nunc. Etiam sit amet bibendum nisl. Aliquam nec
rutrum purus. Sed eget nunc eget justo venenatis accumsan. Fusce vel est semper, rutrum orci ac, ullamcorper orci. Donec in ornare urna. Sed sollicitudin maximus ante, eget finibus lacus pharetra sed. Ut interdum, nulla ultricies euismod mollis, tortor
lorem accumsan ex, sit amet pharetra ante urna id libero. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean facilisis non purus at pulvinar. Fusce consectetur vestibulum purus. Ut finibus justo pretium,
dictum sapien nec, tincidunt eros. Nunc a sagittis nulla. Ut ac rhoncus libero. Aliquam egestas laoreet felis in volutpat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eu ex nibh. Donec ac diam eget leo venenatis porta. Vivamus nisl
dolor, dictum eu justo vel, luctus euismod erat. Nunc imperdiet odio id turpis auctor scelerisque.

<hr>
<section id="footer">
  <br>
  <div class="inner">
    I'm a foot I'm a foot I'm a foot I'm a foot I'm a foot I'm a foot I'm a foot I'm a foot
    <br> Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean facilisis non purus at pulvinar. Fusce consectetur vestibulum purus. Ut finibus justo pretium, dictum sapien nec, tincidunt eros. Nunc a sagittis
    nulla. Ut ac rhoncus libero. Aliquam egestas laoreet felis in volutpat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eu ex nibh. Donec ac diam eget leo venenatis porta. Vivamus nisl dolor, dictum eu justo vel, luctus euismod erat.
    Nunc imperdiet odio id turpis auctor scelerisque.
    <hr> I'm a foot I'm a foot I'm a foot I'm a foot I'm a foot I'm a foot I'm a foot I'm a foot
  </div>
</section>

标签： javascriptajaxhtml5-historypopstate

解决方案

我注意到对于您的所有链接，您都执行以下代码。

els = document.querySelectorAll('[data-mia]');
els.forEach(function(el) {
  if (el.getAttribute('data-mia') in pages) {
    el.addEventListener('click', clickHandler, true);
  }
});

clickHandler更新，因此history当您向后导航时，历史记录包含以前的条目。但是点击#footer历史记录并没有更新，这可能是您所面临问题的原因。

更新我的答案。

我看到你已经使用document.querySelector('#one').scrollIntoView();假设这是滚动到页面顶部。

我建议你使用

// This prevents the page from scrolling to the previous position.
if ('scrollRestoration' in history) {
    history.scrollRestoration = 'manual';
}
// scrolled to the top
window.scrollTo(0,0);

将此用于 IE/Edge

var isIE11 = !!window.MSInputMethodContext && !!document.documentMode;
var isEdge = /Edge/.test(navigator.userAgent);
if(isIE11 || isEdge) {
    setTimeout(function(){ window.scrollTo(0, 0); }, 300);  
// you need to scroll up once the page is loaded, you may need to change the timeout
}

有了这个，您还需要更改以下侦听器。

window.addEventListener('hashchange', function() {
  console.log('The hash has changed!');
  //event.preventDefault();
  // nasty hack #footer for contact link.
   if (window.location.hash ==='#footer')
  document.querySelector('#footer').scrollIntoView();
}, false);

当“#footer”不在该位置时，这将防止监听器滚动到页脚。

希望这可以帮助。

javascript - 具有历史实现和主题标签功能的 ajax 页面加载内容

问题描述

解决方案

推荐阅读