我用过this tutorial 在我的网站上实现ajax页面转换。在查看了一些问题后,我发现在大多数论坛帖子上,人们都建议“使用”admin-ajax.php
.
我对此进行了调查,但恐怕我真的不明白它是如何工作的。
这是我的电流page-transition.js
, 这已经开始很好地发挥作用了。如果我使用admin-ajax.php
, 它真的是“强制性的”吗?
jQuery(document).ready(function (event) {
// get rooturl via localize script
var rootUrl = aws_data.rootUrl;
var isAnimating = false,
newLocation = \'\',
firstLoad = false;
// Internal Helper
$.expr[\':\'].internal = function(obj, index, meta, stack){
// Prepare
var
$this = $(obj),
urlinternal = $this.attr(\'href\')||\'\',
isInternalLink;
// Check link
isInternalLink = urlinternal.substring(0,rootUrl.length) === rootUrl || urlinternal.indexOf(\':\') === -1;
// Ignore or Keep
return isInternalLink;
};
//trigger smooth transition from the actual page to the new one on relevant links
$(\'main\').on(\'click\', \'a[href]:internal:not(.no-ajaxy,.love-button,[href^="#"],[href="#"],[href*="#respond"],[href*="wp-login"],[href*="wp-admin"])\', function (event) {
event.preventDefault();
//detect which page has been selected
var newPage = $(this).attr(\'href\');
//if the page is not already being animated - trigger animation
if (!isAnimating) changePage(newPage, true);
firstLoad = true;
});
//detect the \'popstate\' event - e.g. user clicking the back button
$(window).on(\'popstate\', function (e) {
if (firstLoad) {
/*
Safari emits a popstate event on page load - check if firstLoad is true before animating
if it\'s false - the page has just been loaded
*/
var newPageArray = location.pathname.split(\'/\'), //this is the url of the page to be loaded
//newPage = newPageArray[newPageArray.length - 1];
newPage = window.location.href;
if (!isAnimating && newLocation != newPage) changePage(newPage, false);
}
firstLoad = true;
});
function changePage(url, bool) {
isAnimating = true;
// trigger page animation
$(\'body\').addClass(\'page-is-changing\');
$(\'.cd-loading-bar\').one(\'webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend\', function () {
loadNewContent(url, bool);
newLocation = url;
$(\'.cd-loading-bar\').off(\'webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend\');
});
//if browser doesn\'t support CSS transitions
if (!transitionsSupported()) {
loadNewContent(url, bool);
newLocation = url;
}
}
function loadNewContent(url, bool) {
url = (\'\' === url) ? rootUrl : url;
//var newSection = \'cd-\' + url.replace(rootUrl, "");
var section = $(\'<div class="cd-main-content"></div>\');
$.ajax({url: url,
success: function(data){
data = data.replace("<body", "<container").replace("body>", "container>");
var classes = $(data).filter("container").attr("class");
$("body").attr("class", classes + " page-is-changing");
}
});
section.load(url + \' .cd-main-content > *\', function (response, status, xhr) {
// load new content and replace <main> content with the new one
$(\'main\').html(section);
//if browser doesn\'t support CSS transitions - dont wait for the end of transitions
var delay = 1200;
//function to execute after dom is loaded
$(document).foundation();
makeFooterSticky();
window.scrollTo(0, 0);
$(".ajax-load-more-wrap").ajaxloadmore();
//ga(\'send\', \'pageview\', window.location.pathname);
setTimeout(function () {
//wait for the end of the transition on the loading bar before revealing the new content
$(\'body\').removeClass(\'page-is-changing\');
$(\'.cd-loading-bar\').one(\'webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend\', function () {
isAnimating = false;
$(\'.cd-loading-bar\').off(\'webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend\');
});
if (!transitionsSupported()) isAnimating = false;
}, delay);
if (url != window.location && bool) {
//add the new page to the window.history
//if the new page was triggered by a \'popstate\' event, don\'t add it
window.history.pushState({
path: url
}, \'\', url);
}
});
}
function transitionsSupported() {
return $(\'html\').hasClass(\'csstransitions\');
}
});