0

好的！我在一个 wordpress 网站上工作，这个 javascript 添加的所有东西都应该做，它确实......但是，当我通过 safari develop 检查元素时，我注意到它正在加载我所有的标题脚本、元、样式等. 进入身体和头部。我不知道为什么。脚本如下所示：

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/

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

4

1 回答 1

0

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 on-the-fly 加载它们时，javascript 代码无法正常工作。

于 2013-07-03T04:13:57.413 回答