好!我正在一个wordpress网站上工作,此javascript脚本应做的所有事情都可以做到,但是...但是,当我通过Safari开发检查元素时,我注意到它正在加载我的所有标头脚本,元数据,样式等进入身体和头部。我不知道为什么。脚本如下所示:

function ft(params) {

var ol= document.addEventListener?"DOMContentLoaded":"load"; //on load event
var navB = params.navB || "reverse slide"; //backbrowser button effect, default empty
var but = params.but || false; //Allow transitions on input type button
var cBa = params.cBa || function() {};

function aDL(url, t, o) {   //Ajax Div Load
  if (window.XMLHttpRequest) {
    r = new XMLHttpRequest();
  } else if (window.ActiveXObject) {
    r = new ActiveXObject("Microsoft.XMLHTTP");
  }
  if (r != undefined) {
    r.onreadystatechange = function() {Ol(r, t, o);};
    r.open("GET", url, true);
    r.send("");
  }
}
function Ol(r, t, o) {  //On load div
  if (r.readyState == 4) {
    if (r.status == 200 || r.status == 0) {
      t.innerHTML = r.responseText;
      o();
    } else {
      t.innerHTML="Error:\n"+ r.status + "\n" +r.statusText;
    }
  }
}

    function DE()       //Div Effect
{
var dochtml = document.body.innerHTML;
document.body.innerHTML = "";
var d1 = document.createElement("div");
d1.id = "d1";
d1.style.zIndex = 2;
d1.style.position = "absolute";
d1.style.width = "100%";
d1.style.height = "100%";
d1.style.left = "0px";
d1.style.top = "0px";
document.body.appendChild(d1);
d1.innerHTML = dochtml;
var d2 = document.createElement("div");
d2.id = "d2";
d2.style.zIndex = 1;
d2.style.position = "absolute";
d2.style.width = "100%";
d2.style.height = "100%";
d2.style.left = "0px";
d2.style.top = "0px";
document.body.appendChild(d2);
return {d1: d1, d2: d2 };
}

function timeOuts(e, d1,d2)
{
setTimeout(function() { d1.className = e + " out"; }, 1);
setTimeout(function() { d2.className = e + " in"; }, 1);
setTimeout(function() {
    document.body.innerHTML = d2.innerHTML;
    cBa();
}, 706);
}

function slideTo(href, effect, pushstate)
{
var d = DE();
var d1 = d.d1;
var d2 = d.d2;
aDL(href, d2,
function() {
if (pushstate && window.history.pushState) window.history.pushState("", "", href);
            timeOuts(effect,d1,d2);
        }
);
}
function dC(e){ //Detect click event
var o;
var o=e.srcElement || e.target;
var tn = o.tagName.toLowerCase();
if (!but || tn!="input" || o.getAttribute("type")!="button")    //if it is not a button
{
    //try to find an anchor parent
    while (tn!=="a" && tn!=="body")
    {
        o = o.parentNode;
        tn = o.tagName.toLowerCase();
    }
    if (tn==="body") return;
}
var t = o.getAttribute("data-ftrans");
if (t)
{
    e.preventDefault();
    var hr = o.getAttribute("href") || o.getAttribute("data-href");
    if (hr) slideTo(hr, t, true);
}
}
function aE(ev, el, f) {  //Add event
if (el.addEventListener)  // W3C DOM
    el.addEventListener(ev,f,false);
else if (el.attachEvent) { // IE DOM
     var r = el.attachEvent("on"+ev, f);
     return r;
}
}
aE("click", window, dC);

aE(ol, document,        //On load
function(ev)
{
aE("popstate", window, function(e) {    //function to reload when back button   is clicked
        slideTo(location.pathname, navB, false);
});
}

);


}


这是该站点的链接:http://www.fasw.ws/faswwp/non-jquery-page-transitions-lightweight/

我认为那不应该发生。所以我试图弄清楚如何保持它的干净,并使head文件保持在head中,并且仅加载页面内容。我无法弄清楚这一点,需要专业人士的帮助:)

最佳答案

FASW带有两个函数,它们在初始化组件之前和之后都充当“挂钩”。您可以这样做:

(function inittrans()
{
    initComponents();
    var params = { /*put your options here*/ };
    new ft(params);
})();

function onTransitionFinished()
{
    initComponents();
}

function initComponents() {
    // here is where you put your "other" javascript codes
}


请注意,加载初始页面后以及过渡发生后再次执行JavaScript代码的方式。无论如何,这就是我的解决方法,因为FASW通过Ajax即时加载了这些代码,因为它们无法工作。

10-04 19:38