如何保持元素不刷新

TL; DR

我已经为您制作了一个塞子，让您看一看，并[尽可能地使用它。您将从中学 到很多东西！

我认为您在这里尝试了太多事情，但没有尝试最简单的方法：

主要目标是使徽标文本和菜单保持不刷新，而不会在刷新页面或将内容从页面加载到另一个页面时进行裁剪。菜单状态也应从一个页面保存到另一个页面。

如果要这样做，请执行以下步骤：

• 创建一个“母版”页面，

  index.html

  从现在开始我们将调用该页面。
• 因此，索引必须具有页面的静态部分，例如菜单，徽标，页脚等。
• 那么，我们的“子页面”必须减少（无

  html

  ，

  head

  ，

  body

  ，

  script

  ，

  style

  标签，只将显示在我们的母版页内容）。

• 完成之后，现在我们必须更改链接以使用AJAX而不是进行完全刷新：

  document.getElementById(‘menu-menu-2’).addEventListener(‘click’, function(e) {
  var el = e.target;
  

  / then, we see if the element that was clicked is a anchor /
  if (el.tagName === ‘A’) {
  / we prevent the default functionality of the anchor (i.e redirect to the page) /
  e.preventDefault();
  / we show our spinner, so the user can see that something is loading /
  spinner.classList.remove(‘hidden’);

  ajax(el.href, function(xhr) {    document.getElementById('main').innerHTML = xhr.responseText;    spinner.classList.add('hidden');});

  }
  });

• 好的，现在我们的页面已经可以通过AJAX运行，并且不会重新加载我们的静态内容。

但是现在，我们看到了一些问题。例如，如果有人尝试直接通过URL打开我们的页面之一，那么他将看到没有样式的页面，而没有菜单/徽标等。那么，我们应该怎么做？

现在，我们还有几个步骤：

• 使用History API模拟我们的链接在页面之间有效地传输：

  ajax(el.href, function(xhr) {
  document.getElementById(‘main’).innerHTML = xhr.responseText;

  / save the new html, so when the user uses the back button, we can load it again /
  history.pushState({
  html: main.innerHTML,
  title: el.textContent + ‘| neuegrid’
  }, ‘’, el.href);

  / (…) /
  });

  / and outside it, we add a ‘popstate’ event handler /
  window.addEventListener(‘popstate’, function(e) {
  / so, if we’ve saved the state before, we can restore it now /
  if (e.state) {
  document.getElementById(‘main’).innerHTML = e.state.html;
  document.title = e.state.title;
  }
  });

• 而且，当用户直接进入另一个页面（例如）时

  about-us

  ，我们需要将其重定向到

  index.html

  ，然后

  about-us

  从那里加载页面。

• 因此，我们创建了一个

  redirect.js

  文件，并在所有子页面中对其进行引用：

  sessionStorage.setItem(‘page’, location.pathname);
  / and them, we redirect him to our main page /
  location.replace(‘/’);

• 然后，在我们的

  index.html

  页面中，查看中是否有任何页面

  sessionStorage

  ，如果有的话，我们将其加载，否则，将加载我们的

  home

  页面。

  var page = sessionStorage.getItem('page') || 'home';

  / we look into the menu items, and find which has an href attribute
  ending with the page’s URL we wanna load /
  document.querySelector(‘#menu-menu-2 > li > a[href$=”’ + page + ‘“’).click();

就是这样，我们现在完成了。看看我给你做的矮人。

并尽可能地使用它，因此您将从中学到很多东西。

希望能对您有所帮助！:)

注意：仅供参考，这是我们的

ajax

function ajax(url, callback, method, params) {  if (!method) method = 'GET';  var xhr = new XMLHttpRequest();  xhr.open(method, url);  if (callback) xhr.addEventListener('load', function() {    callback.call(this, xhr);  });  if (params) {    params = Object.keys(params).map(function(key) {      return enpreURIComponent(key) + '=' + enpreURIComponent(params[key]);    }).join('&');    xhr.send(params);  } else {    xhr.send();  }}