如何保持元素不刷新 [英] How to keep elements non-refreshed

问题描述

主要目标是保持未刷新的logotext < div class =small-7 medium-4 columns logo> $ c>< nav class =pagedMenurole =navigation> ，在页面刷新或内容从页面加载到另一个页面时不会裁剪。此外，菜单状态应该从一个页面保存到另一个页面。

The main goal is to keep non-refreshed the logotext <div class="small-7 medium-4 columns logo"> and the menu <nav class="pagedMenu" role="navigation">,without clipping on page refresh or while the content is loading from a page to another. Also, the menu state should be preserved from a page to another.

我找到了这里可能的解决方案问题（你可以使用ajax获取更新的内容，并使用jQuery将新内容放在页面上，避免刷新。）以这种方式，页面中的现有数据将保持不变。 said @ jfriend00）

I've found here a possible solution that could solve the problem (you could use ajax to fetch the updated content and use jQuery to put the new content on the page and avoid the refresh entirely. Doing it that way, the existing data in the page would remain untouched. said @jfriend00)

所以，我试图使用Ajax插件（称为 AWS ）。在AWS选项页面，我（假设），我做了正确的事情指向 wrapper 作为 Ajax容器ID 以及 pagedMenu 作为菜单容器类，转换效果启用，没有ajax容器ID

So, I have tried to use an Ajax plugin (called AWS). In the AWS option page, I (suppose) that I've done the right thing pointing wrapper as Ajax container ID and also pagedMenu as Menu container class, Transition Effect Enabled, No ajax container IDs blank, no loader selected, having already a pulse loader implemented in the theme.

在这一点上，我得到了一个菜单/侧菜单（shiftnav）/脉冲点加载器/内容加载故障，或者可能是由错误定义的 Ajax容器id 和/或菜单容器类（？）或与现有的 JS

At this point, all I got it's a menu / side-menu (shiftnav) / pulse dot loader / content loading malfunction, generated perhaps by the wrong defined Ajax container id and/or menu container class(?) OR by a conflict with an existing JS / jQuery code, not so sure.

此外，在Chrome控制台中还有一个错误：

Also in Chrome console there is an error:

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

正常的页面刷新，但根本没有帮助，是无用的。

Everything is getting back to normal on page refresh but doesn't help at all, being useless.

我还要提到的菜单我试图保持状态使用jQuery- Storage-API和 storage = jQuery.sessionStorage; ，您可以在 mynewmenu中看到.js 文件，但这不会解决非刷新元素的问题。

I also have to mention that for the menu I've tried to keep the state using jQuery-Storage-API and storage=jQuery.sessionStorage; as you can see in mynewmenu.js file but that will not solve the non-refreshing elements problem.

菜单jsfiddle只有，如果这有助于有整个图片，这里感谢 @Diego Betto 。

The menu jsfiddle only, if this helps to have the whole picture, here thanks to @Diego Betto.

您可以使用此直播链接作为示例;存在与上述-Ajax实现权（？）类似的情况，并且关于外观，菜单被保持从一个页面到另一个页面不被刷新;如果您浏览图书，工作等，您将看到菜单部分;如果有一个模型可以在这里实现，我很高兴找到它。

You can use this live link as example; there is a similar situation with the above described - Ajax implementation right(?) - and regarding the appearance, menu is kept non-refreshed from one page to another; if you browse Books, Works etc, menu sections you'll see; if there is a model that could be implemented here, I'll be glad to find it.

LE：同时，我尝试了另一个 ajaxify解决方案由@arvgta - 特别感谢 - 没有成功，但就我从作者发现，定义的元素应该是div的id不是类。所以，我会尝试找到一种方法来修改代码，以便在类上有id。

LE: meanwhile, I've tried another ajaxify solution made by @arvgta - special thanks - without succes yet but as far as I've found from the Author, the defined elements should be div's with id's not classes. So, I'll try to find a way to modify somehow the code in order to have id instead on classes.

此外，我将尝试转换和实现ajaxify.min.js文件， page-container 元素; jQuery（'＃page-container'）。ajaxify（）; 我会回来的消息。

Also, I'll try to transform and implement in ajaxify.min.js file, the page-container element; jQuery('#page-container').ajaxify(); I'll come back with news.

LE2：我试图实现解决方案使用id，而不是类，但仍然，页面无法正确加载。

LE2: I've tried to implement the solution using id's instead of classes but still, the pages are not loading correctly.

此时，我们使用以下行更新了ajax.min.js文件：

At this point we have ajax.min.js file updated with these lines:

(function($){

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

})(jQuery); 

此外，我修改了主题文件以具有 id = page- $

Also, I've modified the theme file to have id=page-container instead if class=page-container.

在这些条件下，在菜单上点击，链接改变（像它应该），菜单/ logotext元素似乎工作几乎罚款（有时得到skippy更改位置），但内容没有正确加载在所有情况下;同样，在手动页面刷新（f5），一切都恢复正常，但没有帮助。

In these conditions, on menu click, the links are changed (like it should), menu/ logotext elements seems to working almost fine (sometimes get skippy changing position), but the content is not loading correctly in all cases; Same here, everything is getting back to normal on manual page refresh (f5), but doesn't help.

LE3：看起来像（至少）革命Slider插件和Ajaxify之间的冲突。

LE3: It looks like the conflict is (at least) between Revolution Slider plugin and Ajaxify.

errormessage =革命滑块错误：你有一些jquery.js库包括在革命文件js包括之后。 ; =+ =
这包括make删除了转动滑块库，并使它不工作。 < =span =>

网站直播链接此处。在这方面的任何想法/替代方案？ （不感兴趣使用其他不同的平台，不同的WordPress主题等只是在这种现有情况下的解决方法）

Site live link here. Any thoughts / alternative in this area? (not interested in using other different platforms, different WordPress themes, etc. just a workaround in this existing situation)

LE4：据我所见，投票选择 Jake Bown答案的用户可能确实是一个解决方案;但我找不到正确实施到我的主题中的原因（没有错误）在此链接元素logotext / menu仍在刷新时淡出，不保持非刷新。任何想法@Jake Bown /任何人？

LE4: As far as I can see, there are many users that voted up the Jake Bown answer that could be indeed a solution; but I can't find the reason that didn't work correctly implemented into my theme (without errors) live link here The elements logotext / menu are still fading on refresh, are not kept non-refreshed. Any thoughts @Jake Bown / anyone?

LE final。
Buzinas （再次感谢您的时间和精力）为我的需求提供了最接近的答案，考虑我的网站环境（安装插件等）;一旦我实施了最终解决方案，我就会收到新闻。非常感谢大家。

LE final. Buzinas (thank you once again for your time and effort) delivered the closest answer for my needs, taking in consideration my site enviroment (plugins installed, etc); I'll come back with news as soon as I have the final solution implemented. Thank you all.

推荐答案

TL; DR

我为您创建了一个plunker ，看看，只要您可以使用它。

我想你尝试过多在这里，但没有尝试最简单：

I think you're trying too many things here, but didn't try the simplest:

主要目标是保持非刷新的logotext和菜单，页刷新时或内容从页面加载到另一个页面时。

The main goal is to keep non-refreshed the logotext and the menu ,without clipping on page refresh or while the content is loading from a page to another. Also the menu state should be preserved from a page to another.

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

If you want to do that, there are a few steps:

• 创建一个master页面，我们将调用 index.html
  
• 因此，我们的索引必须具有页面的静态部分，例如菜单，标志，页脚等。
我们的子页面必须减少（ html ， head ， body ， script ， style 标签，只有应显示在我们的母版页中的内容。 / li>


• 这样做，现在我们必须将链接更改为使用AJAX，而不是完全刷新：

• Create a 'master' page, that we're going to call index.html from now on.
• So, our index must have the static part of our page, e.g menu, logo, footer etc.
• Then, our 'subpages' must be cut down (no html, head, body, script, style tags, only the content that should be showed into our master page).

• That done, now we must change our links to use AJAX instead of doing full refresh:

/* 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工作，而不是重新加载我们的静态内容。

Ok, now our pages are already working via AJAX, and not reloading our static content.

但现在，我们看到了一些问题。例如，如果有人尝试通过URL直接打开我们的一个页面，他会看到没有菜单/标志等的未定型页面。所以，我们应该怎么办？

But now, we see that we have some issues. For example, if someone tries to open one of our pages directly via URL, he'll see unstyled page, without the menu/logo etc. So, what should we do?

我们现在还有更多步骤：

We have a few more steps now:

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

• Simulate that our links are effectively transfering between pages using the 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 <

And we need that when the user enters directly to another page, e.g about-us, we redirect him to the index.html, and then load the about-us page from there.

因此，我们创建一个 redirect.js 文件，我们在所有的
子页面中引用它：

So we create a redirect.js file, and we reference it in all of our subpages:

/* 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 页面。

And then, in our index.html page, we see if there is any page in the sessionStorage, and we load it, if there is, otherwise we load our home page.

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();

。看看我一直在为你做的plunker 。

并且只要可以，所以你会从中学到很多。

And play with it as long as you can, so you'll learn a lot from it.

我希望我能帮助你！ ：）

I hope I could help you! :)

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

Note: Just for reference, this is our ajax function:

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();
  }
}

这篇关于如何保持元素不刷新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！