与WORDPRESS一起玩游戏

Question

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

我发现here可能解决问题的可能解决方案（您可以使用ajax获取更新的内容并使用jQuery将新内容放在页面上并避免刷新这样做，页面中的现有数据将保持不变。表示@jfriend00）

所以，我尝试使用Ajax插件（称为AWS）。在AWS选项页面中，我（假设）我做了正确的事情，将wrapper指向 Ajax容器ID ，并将pagedMenu指向菜单容器class ， Transition Effect 已启用，没有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，如果这有助于全局了解，here感谢@Diego Betto。

您可以使用此实时链接as example;与上面描述的类似情况 - Ajax实现权限（？） - 关于外观，菜单从一个页面保持不刷新到另一个页面;如果你浏览图书， Works 等，你会看到的菜单部分;如果有一个可以在这里实施的模型，我很乐意找到它。

LE：同时，我已经尝试了@arvgta制作的另一个ajaxify solution - 特别感谢 - 但没有成功，但就我从作者那里发现，定义的元素应该是div＆＃39; s的id不是类。因此，我将尝试找到一种方法来修改代码，以便在类上使用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代替class=page-container。

在这些情况下，在菜单点击时，链接会发生变化（就像它应该的那样），菜单/ logotext元素似乎工作得很好（有时会变得很快变化），但内容在所有情况下都没有正确加载;同样在这里，手动页面刷新（f5）的一切都恢复正常，但没有帮助。

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

errormessage =＆＃34;革命滑块错误：你有一些jquery.js库包含在革命文件js包括之后。＆＃34; ; =＆＃34;＆＃34; + =＆＃34;
这包括make消除了旋转滑块库，并使其不起作用。＆＃34; ＆＃34;＆LT; =＆＃34;＆＃34;跨度=＆＃34;＆＃34;＆GT;＆＃34;

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

LE4：据我所知，有很多用户投票赞成 Jake Bown回答，这确实是一个解决方案;但是我找不到在我的主题中没有正确实现的原因（没有错误）live link here元素logotext / menu在刷新时仍然消失，不会保持不刷新。任何想法@Jake Bown /任何人？

LE决赛。 Buzinas 根据我的需求提供了最接近的答案，并考虑了我的网站环境（安装了插件等）。

Answer 1

根据您的说法，我认为我可能已经找到了您正在寻找的解决方案 - 您希望动态加载内容，同时保持徽标和导航不受影响？如果是，this might be what you're looking for。

在该示例中，页面是从页面中的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; DR

我created a plunker for you，看看，play with it as long as you can。你将从中学习很多！

我认为你在这里尝试的东西太多了，但没试过最简单的事情：

主要目标是保持非刷新的logotext和菜单，而不会在页面刷新时或在内容从页面加载到另一个页面时剪切。菜单状态也应该从一个页面保存到另一个页面。

如果您想这样做，可以采取以下几个步骤：

创建一个“主”页面，我们将从现在开始致电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 } 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();

就是这样，我们现在就完成了。看看at the plunker I've been making to you。

play with it as long as you can，所以你可以从中学到很多东西。

我希望我能帮到你！：）

注意：仅供参考，这是我们的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();
  }
}

Answer 3

与WORDPRESS一起玩游戏

演示： http://so.devilmaycode.it/how-to-keep-elements-non-refreshed/

按照以下简单步骤（让我们以WP模板文件夹中的主题"twentyfifteen"为例）：

修改single.php，page.php，index.php以及包含get_header()和get_footer()个功能的所有其他网页，并分别使用以下代码替换它：

注意：这很重要，因为如果有人（例如搜索引擎）直接从链接访问您的网页，它仍然完全可用且100％正常工作。（对SEO很有用）

<?php 
//get_header()
if(!isset($_REQUEST['ajax'])){
  get_header();
}
?>

<!-- other code --->

<?php
//get_footer()
if(!isset($_REQUEST['ajax'])){
  get_footer();
}
?>

打开header.php在最后的<head>部分添加以下代码

    <script>
!(function($) {
    $(function() {
        $('.menu-item a, .widget-area a, .page_item a').on('click', function(e) {
            e.preventDefault();
            var href = this.href;
            var query = href ? (href + (!/\?/g.test(href) ? '?' : '&') + 'ajax=1') : window.location;

            /* IMPLEMENT SOME LOGIG HERE BEFORE PAGE LOAD */
            /* ex: kill instance of running plugins */

            $('#content').hide().empty().load(query, function() {

                /* IMPLEMENT SOME LOGIG HERE AFTER PAGE IS LOADED */
                /* ex: refresh or run a new plugin instance for this page */

                jQuery(this).show();
            });
        });
    });
})(jQuery);
    </script>

header.php

将下面的代码放在文件的末尾，在导航下90％的时间需要它。在这种情况下，我们已经在"twentyfifteen"主题上有这个。

NB：很可能您在<div id="content" class="site-content">文件中有开头标记header.php，</div>文件上有结束标记footer.php，这没关系，你可以保持原样。

<div id="content"></div>

注意：认为这是一个概念验证;它可以按原样工作，但你仍需要根据自己的需要定制它;你可能需要：
1. 在Appeareace > Menus > [check Primary Menu] > Save Menu下方添加菜单（如果尚未设置）以激活菜单。它已经过测试和运作。
2. 您可能希望在jQuery函数中添加一些其他类，例如.widget-area a，以便也可以为ajax添加小部件链接。
3. 如果您使用的是 3d派对插件，则可能需要确保每个插件的所有依赖关系也在主页上加载您想要的所有内容都会在没有刷新内容的情况下显示。
4. 您可能需要在新网页加载和运行或刷新终止这些 3d派对插件 >加载页面中需要插件。

如何保持元素不刷新

3 个答案:

与WORDPRESS一起玩游戏