如何保持元素不刷新

Question

主要目标是保持非刷新的logotext <div class="small-7 medium-4 columns logo">和菜单<nav class="pagedMenu" role="navigation">,而不会在页面刷新时剪切或在内容从页面加载到另一页面时.此外,菜单状态应从页面保留到另一页.

我在这里找到了一个可以解决问题的可能解决方案(您可以使用ajax获取更新的内容并使用jQuery将新内容放在页面上并完全避免刷新.这样做,现有的数据在页面将保持不变.说@ jfriend00)

所以,我试图使用Ajax插件(称为AWS).在AWS选项页,我(想),我已经做了指向正确的事wrapper作为阿贾克斯容器ID,也pagedMenu作为菜单的容器类,过渡效果已启用,没有AJAX容器ID空白,没有选择的装载机,其已经是一个脉冲装载机实现在主题中.

在这一点上,我得到的是菜单/侧面菜单(shiftnav)/脉冲点加载器/内容加载故障,可能是由错误定义的Ajax容器ID和/或菜单容器类(？)产生的,或者是由于与现有JS/ jQuery代码,不太确定.

此外,在Chrome控制台中还有一个错误:

Uncaught SyntaxError: Unexpected token ;
(anonymous function) @ ajaxify.js?ver=4.3.1:175
n.extend.each @ jquery-2.1.4.min.js?ver=2.1.4:2
n.fn.n.each @ jquery-2.1.4.min.js?ver=2.1.4:2
$.bind.$.ajax.success @ ajaxify.js?ver=4.3.1:169
n.Callbacks.j @ jquery-2.1.4.min.js?ver=2.1.4:2
n.Callbacks.k.fireWith @ jquery-2.1.4.min.js?ver=2.1.4:2
x @ jquery-2.1.4.min.js?ver=2.1.4:4
n.ajaxTransport.k.cors.a.crossDomain.send.b @ jquery-2.1.4.min.js?ver=2.1.4:4

在页面刷新时,一切都恢复正常,但根本没用,没用.

我还要提到,对于菜单,我试图使用jQuery-Storage-API来保持状态,storage=jQuery.sessionStorage;正如你在mynewmenu.js文件中看到的那样但是这不能解决非刷新元素问题.

菜单的jsfiddle而已,如果这能帮助到有整个画面,在这里感谢@Diego贝托.

您可以使用此实时链接作为示例 ; 与上面描述的类似情况 - Ajax实现权限(？) - 关于外观,菜单从一个页面保持不刷新到另一个页面; 如果您浏览书籍,作品等,您将看到的菜单部分; 如果有一个可以在这里实施的模型,我会很高兴找到它.

LE:与此同时,我尝试了另一个由@arvgta制作的ajaxify解决方案 - 特别感谢 - 但没有成功,但就我从作者发现的那样,定义的元素应该是id而不是类的div.所以,我将尝试找到一种方法来修改代码,以便在类上使用id.

另外,我将尝试在ajaxify.min.js文件中转换并实现该page-container元素; jQuery('#page-container').ajaxify();我会带回新闻.

LE2:我尝试使用id而不是类来实现解决方案,但仍然没有正确加载页面.

此时我们用这些行更新了ajax.min.js文件:

(function($){

  jQuery(document).ready(function(){
    jQuery('#page-container').ajaxify({requestDelay:400,forms:false});
  });

})(jQuery); 

此外,我已经修改了主题文件id=page-container而不是if class=page-container.

在这些条件下,在菜单上单击,链接被更改(就像它应该),菜单/ logotext元素似乎工作得很好(有时会变得很快改变位置),但内容在所有情况下都没有正确加载; 同样在这里,手动页面刷新(f5)的一切都恢复正常,但没有帮助.

LE3:看起来冲突(至少)是Revolution Slider插件和Ajaxify之间的冲突.

errormessage ="革命滑块错误:你有一些jquery.js库包含在革命文件js包括之后." ; =""+ ="
这包括make消除了旋转滑块库,使其无效." "<=""span ="">"

网站实时链接在这里.这个领域有什么想法/替代方案吗？(对使用其他不同平台,不同的WordPress主题等不感兴趣,只是在现有情况下的解决方法)

LE4:据我所知,有很多用户投票赞成Jake Bown的答案,这可能确实是一个解决方案; 但我找不到原因无法正常实现到我的主题(没有错误)这里的实时链接元素logotext /菜单仍然在刷新时淡出,不保持不刷新.任何想法@Jake Bown /任何人？

LE决赛. Buzinas为我的需求提供了最接近的答案,考虑到我的站点环境(安装了插件等).

Answer 1

从你所说的我想我可能找到了你正在寻找的解决方案 - 你想动态加载内容同时保持徽标和导航不变？如果是这样,这可能就是你要找的东西.

在该示例中,页面是从页面内的div加载的,但可用于加载另一个URL或文件:

$('.viewport ul li a').on('click', function(e) {
   e.preventDefault();
   var link = this.hash.substring(1, this.hash.length);
   if($('.'+link).length) {
     $('.viewport span.body').html($('.'+link).html());
   }
});

Answer 2

TL; 博士

我已经为你创建了一个 plunker，你可以看看它，并尽可能地玩它。你会从中学到很多！

我认为您在这里尝试了太多东西，但没有尝试最简单的：

主要目标是保持未刷新的徽标文本和菜单，而不是在页面刷新或内容从一个页面加载到另一个页面时剪辑。此外，菜单状态应该从一个页面保存到另一个页面。

如果你想这样做，有几个步骤：

• 创建一个“母版”页面，我们index.html将从现在开始调用它。
• 因此，我们的索引必须包含页面的静态部分，例如菜单、徽标、页脚等。
• 然后，我们的“子页面”必须被削减（没有html, head, body, script,style标签，只有应该显示在我们的母版页中的内容）。

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

  /* we add a 'click' event handler to our menu */
  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');
  
      /* and we call our AJAX function, passing a function as the callback */
      ajax(el.href, function(xhr) {
        /* we get our main div, and we replace its HTML to the response that came
           from the AJAX request */
        document.getElementById('main').innerHTML = xhr.responseText;
        /* since the request was finished, we hide our spinner again */
        spinner.classList.add('hidden');
      });
    }
  });
  

• 好的，现在我们的页面已经通过 AJAX 工作，而不是重新加载我们的静态内容。

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

我们现在还有几个步骤：

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

  /* inside our ajax callback, we save the fake-redirect we made into the pushState */
  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文件，并在我们所有的子页面中引用它：

  /* save the page that the user tried to load into the sessionStorage */
  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 encodeURIComponent(key) + '=' + encodeURIComponent(params[key]);
    }).join('&');
    xhr.send(params);
  } else {
    xhr.send();
  }
}