1

我正在开发一个新网站。我以前编写过很多代码，但没有这个高级。我有一个 html 文件，它是主页。现在，我正在通过 ajax 更改页面的内容。一切正常。因此，当我单击“主页”菜单时，它会调用该函数，并获取另一个包含内容的 HTML 文件。

在我的主要 html 中，我有这个：

<html>
    <head>
    <title>
        Estancia
    </title>
    <link rel="stylesheet" href="css/stylesheet.css"/>
    <link rel="stylesheet" href="webfont/webFontStylesheet.css" type="text/css" charset="utf-8"/>
    <script type="text/javascript" src="js/ajax.js"></script>
</head>
<body onLoad = "javascript:home()">
    <div id = "bodyLeft">
        <!-- This is just a sideskirt -->
    </div>
    <div id = "bodyRight">
        <!-- This is just a sideskirt -->
    </div>

    <div id = "header">
        <h1>
            Estancia
        </h1>

    </div>
    <div id = "footer">
        <h5>
            Copyright&copy; 2013
        </h5>
    </div>
    <div id = "background">
        <!-- This is just the background color -->
    </div>
    <div id = "scrollCover">
        <!-- Used to cover the scrolled content -->
    </div>
    <div id = "body">

    </div>
    <div id = "content">
        If you see this then the page did not load correctly. Try reloading the page. If problem persists, try reinstalling the Mozilla Firefox Browser. <br/><br/> Error: Javascript may not be working. <br/> Fix: Enable Javascript in your browser.
    </div>
    <div id = "menu">
        <div id = "home" onClick="javascript:home()">
            <a href = "#"> Home </a>
        </div>
        <div id = "information">
            <a href = "#"> Information </a>
            <span id = "aboutDrop">
                <a class = "about" href="#" onClick = "javascript:about()"> About </a>
                <br/>
                <a class = "map" href="#" onClick = "javascript:map()"> Map </a>
            </span>
        </div>
        <div id = "history" onClick = "javascript:history()">
            <a href = "#"> History </a>
        </div>
        <div id = "pictureGallary">
            <a href = "#"> Picture Gallary </a>
            <span id = "pictureGalleryDrop">
                <a class = "ef" href = "#" onClick = "javascript:estanciaFarm()"> Estancia Farm </a>
                <br/>
                <a class = "ca" href = "#" onClick = "javascript:cattle()"> Cattle </a>
                <br/>
                <a class = "ga"href = "#" onClick = "javascript:game()"> Game </a>
                <br/>
                <a class = "go" href = "#" onClick = "javascript:goats()"> Goats </a>
                <br/>
                <a class = "sh" href = "#" onClick = "javascript:sheep()"> Sheep </a>
            </span>
        </div>
    </div>
</body>

这里没有问题......当我点击它时，它会正确加载。因此，当单击 Home 时，它​​会通过 ajax 更改内容，如下所示：

var xmlhttp = new XMLHttpRequest();
    var path;
    var div;

function home()
{
    path = "html/home.html";
    div = "content";
    AJAX(path, div);
}

    function AJAX(path, div)
{
    xmlhttp.open("GET", path, false);
    xmlhttp.send();
    if (xmlhttp.readyState == 4)
    {
        document.getElementById(div).innerHTML = xmlhttp.responseText;
    }
}

如您所见，它将另一个 html 文件加载到内容中。因此，这是该 html 文件的代码：

<html>
<head>
    <link rel="stylesheet" href="css/homeMenu.css"/>
    <script type="text/javascript" src="js/javascript.js"></script>
</head>
<body>
    <div id = "slideshow">
        <div id = "first">
            <img id = "a1" src = "images/home/img1_e.jpg"/>
            <img id = "a2" src = "images/home/img2_e.jpg"/>
            <img id = "a3" src = "images/home/img3_e.jpg"/>
            <img id = "a4" src = "images/home/img4_e.jpg"/>
        </div>
        <div id = "second">
            <img id = "b4" src = "images/home/img4_e.jpg"/>
            <img id = "b1" src = "images/home/img1_e.jpg"/>
            <img id = "b2" src = "images/home/img2_e.jpg"/>
            <img id = "b3" src = "images/home/img3_e.jpg"/>
        </div>
        <div id = "third">
            <img id = "c3" src = "images/home/img3_e.jpg"/>
            <img id = "c4" src = "images/home/img4_e.jpg"/>
            <img id = "c1" src = "images/home/img1_e.jpg"/>
            <img id = "c2" src = "images/home/img2_e.jpg"/>

        </div>
        <div id = "fourth">
            <img id = "d2" src = "images/home/img2_e.jpg"/>
            <img id = "d3" src = "images/home/img3_e.jpg"/>
            <img id = "d4" src = "images/home/img4_e.jpg"/>
            <img id = "d1" src = "images/home/img1_e.jpg"/>
        </div>
    </div>
    </body>

当我自己加载这个 html 文件时，它工作正常。我需要更改的只是在每个图像路径的开头添加“../”。我相信你会知道为什么。快速的描述是如果它自己，它如果在另一个文件中，所以它需要返回一次。当它通过 ajax 加载到另一个 html 中时，它是主要的，它在每个文件之外并且只是进入它。好的，这很清楚。

问题......我面临的唯一问题是，当我自己加载 home.html 文件时，它执行它的 javascript 就像小菜一碟。

但是，当它加载到主 html 中时，它不起作用。它没有办法执行。我已经尝试过内部 javascript，但它仍然无法正常工作。

这是javascript：

var useBSNns;

        if (useBSNns)
        {
            if (typeof(bsn) == "undefined")
                bsn = {}
            var _bsn = bsn;
        }
        else
        {
            var _bsn = this;
        }

        _bsn.Crossfader = function (divs, fadetime, delay )
        {   
            this.nAct = -1;
            this.aDivs = divs;

            for (var i=0;i<divs.length;i++)
            {
                document.getElementById(divs[i]).style.opacity = 0;
                document.getElementById(divs[i]).style.position = "absolute";
                document.getElementById(divs[i]).style.filter = "alpha(opacity=0)";
                document.getElementById(divs[i]).style.visibility = "hidden";
            }

            this.nDur = fadetime;
            this.nDelay = delay;

            this._newfade();
        }

        _bsn.Crossfader.prototype._newfade = function()
        {
            if (this.nID1)
                clearInterval(this.nID1);

            this.nOldAct = this.nAct;
            this.nAct++;
            if (!this.aDivs[this.nAct]) this.nAct = 0;

            if (this.nAct == this.nOldAct)
                return false;

            document.getElementById( this.aDivs[this.nAct] ).style.visibility = "visible";

            this.nInt = 50;
            this.nTime = 0;

            var p=this;
            this.nID2 = setInterval(function() { p._fade() }, this.nInt);
        }

        _bsn.Crossfader.prototype._fade = function()
        {
            this.nTime += this.nInt;

            var ieop = Math.round( this._easeInOut(this.nTime, 0, 1, this.nDur) * 100 );
            var op = ieop / 100;
            document.getElementById( this.aDivs[this.nAct] ).style.opacity = op;
            document.getElementById( this.aDivs[this.nAct] ).style.filter = "alpha(opacity="+ieop+")";

            if (this.nOldAct > -1)
            {
                document.getElementById( this.aDivs[this.nOldAct] ).style.opacity = 1 - op;
                document.getElementById( this.aDivs[this.nOldAct] ).style.filter = "alpha(opacity="+(100 - ieop)+")";
            }

            if (this.nTime == this.nDur)
            {
                clearInterval( this.nID2 );

                if (this.nOldAct > -1)
                    document.getElementById( this.aDivs[this.nOldAct] ).style.visibility = "hidden";    

                var p=this;
                this.nID1 = setInterval(function() { p._newfade() }, this.nDelay);
            }
        }

        _bsn.Crossfader.prototype._easeInOut = function(t,b,c,d)
        {
            return c/2 * (1 - Math.cos(Math.PI*t/d)) + b;
        }

拜托，当 home.html 被加载到主 html 中时它不想执行，但是当 home.html 自己执行时它可以工作，这是怎么回事？

4

1 回答 1

0

我知道你已经为你所拥有的东西做了很多工作，但是查看一个 jQuery 插件可能会有所帮助，比如 Cycle。http://malsup.com/jquery/cycle

另一方面，您需要<script type="text/javascript" src="js/javascript.js"></script>从您正在检索的页面中删除，并将其放在您要从中加载辅助页面Home.html的文件的头部。main.html它将被称为不通过 AJAX 加载内联执行，这是您遇到的问题。所以我们把它移到了main.html，我们会在home.html页面加载时手动调用它。

当 AJAX 成功时，我已更改您的AJAX方法以采用回调方法或函数。您将看到AJAX方法的第三个参数是完成后要调用的函数，在我们的例子中，startBSN您将看到我js/javascript用这个方法将您的函数进一步包裹在哪里。

var xmlhttp = new XMLHttpRequest();
var path;
var div;

function home()
{
   path = "html/home.html";
   div = "content";
   AJAX(path, div, 'startBSN');
}

function AJAX(path, div, callback)
{
    xmlhttp.open("GET", path, false);
    xmlhttp.send();
    if (xmlhttp.readyState == 4)
    {
       document.getElementById(div).innerHTML = xmlhttp.responseText;
       window[callback]();
    }
}

我已删除您的js/javascript.js并将其包含在 的头部中main.html，您应该将其从您的home.html

我还将您的js/javascript.js代码包装到一个可调用函数中，startBSN否则它将在页面加载时作为匿名函数运行。

这是您的js.javascript带有周围功能的文件startBSN

function startBSN(){
    var useBSNns;

    if (useBSNns)
    {
        if (typeof(bsn) == "undefined")
            bsn = {}
        var _bsn = bsn;
    }
    else
    {
        var _bsn = this;
    }


    _bsn.Crossfader = function (divs, fadetime, delay )
    {   
        this.nAct = -1;
        this.aDivs = divs;

        for (var i=0;i<divs.length;i++)
        {
            document.getElementById(divs[i]).style.opacity = 0;
            document.getElementById(divs[i]).style.position = "absolute";
            document.getElementById(divs[i]).style.filter = "alpha(opacity=0)";
            document.getElementById(divs[i]).style.visibility = "hidden";
        }

        this.nDur = fadetime;
        this.nDelay = delay;

        this._newfade();
    }

    _bsn.Crossfader.prototype._newfade = function()
    {
        if (this.nID1)
            clearInterval(this.nID1);

        this.nOldAct = this.nAct;
        this.nAct++;
        if (!this.aDivs[this.nAct]) this.nAct = 0;

        if (this.nAct == this.nOldAct)
            return false;

        document.getElementById( this.aDivs[this.nAct] ).style.visibility = "visible";

        this.nInt = 50;
        this.nTime = 0;

        var p=this;
        this.nID2 = setInterval(function() { p._fade() }, this.nInt);
    }

    _bsn.Crossfader.prototype._fade = function()
    {
        this.nTime += this.nInt;

        var ieop = Math.round( this._easeInOut(this.nTime, 0, 1, this.nDur) * 100 );
        var op = ieop / 100;
        document.getElementById( this.aDivs[this.nAct] ).style.opacity = op;
        document.getElementById( this.aDivs[this.nAct] ).style.filter = "alpha(opacity="+ieop+")";

        if (this.nOldAct > -1)
        {
            document.getElementById( this.aDivs[this.nOldAct] ).style.opacity = 1 - op;
            document.getElementById( this.aDivs[this.nOldAct] ).style.filter = "alpha(opacity="+(100 - ieop)+")";
        }

        if (this.nTime == this.nDur)
        {
            clearInterval( this.nID2 );

            if (this.nOldAct > -1)
                document.getElementById( this.aDivs[this.nOldAct] ).style.visibility = "hidden";    

            var p=this;
            this.nID1 = setInterval(function() { p._newfade() }, this.nDelay);
        }
    }

    _bsn.Crossfader.prototype._easeInOut = function(t,b,c,d)
    {
        return c/2 * (1 - Math.cos(Math.PI*t/d)) + b;
    }
}
于 2013-01-06T18:24:38.033 回答