JavaScript无法执行

Question

I'm working on a new website. 我正在一个新网站上。 I have coded many before but not as advanced as this one. 我以前写过很多代码，但没有这本书先进。 I have one html file which is the main page. 我有一个HTML文件，它是主页。 Now, I am changing the content of the page via ajax. 现在，我正在通过ajax更改页面的内容。 Everything works fine. 一切正常。 So when I click on, lets say, the "Home" menu, it calls the function, and gets ANOTHER HTML file which has content in it. 因此，当我单击“主页”菜单时，它将调用该函数，并获取其中包含内容的另一个HTML文件。

In my main html I have this: 在我的主要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>

No problems here... when I click it loads correctly. 没问题...当我单击它正确加载。 So, when Home is clicked, it changes the content via ajax like this: 因此，单击“主页”后，它将通过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;
    }
}

As you can see it loads another html file onto the content. 如您所见，它将另一个HTML文件加载到内容上。 So, here is that html file's code: 因此，这是该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>

When I load this html file on its own, it works fine. 当我自己加载此html文件时，它可以正常工作。 All I need to change is to add "../" to every image path's beginning. 我需要更改的是在每个图像路径的开头添加“ ../”。 I'm sure you would know why. 我敢肯定你会知道为什么。 Fast description is that if its on its own, it if in another file, so it needs to go back once. 快速的描述是，如果它自己运行，如果在另一个文件中，那么它需要返回一次。 when it loads via ajax into the other html which is the main one, its outside every file and just goes into it. 当它通过ajax加载到主要的另一个html中时，它位于每个文件的外部，并直接进入其中。 OK, So that is clear. 好的，这很清楚。

The problem... the ONLY problem I'm facing is that when I load the home.html file on its own, it executes its javascript like a piece of cake. 问题...我面临的唯一问题是，当我自己加载home.html文件时，它像小菜一碟一样执行其javascript。

BUT, when it loads into the main html, it soes not work. 但是，当它加载到主html中时，它不能正常工作。 THERE is NO way its executing. 它无法执行。 I've tried internal javascript but its not working, still. 我已经尝试过内部javascript，但仍无法正常工作。

Here's the 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;
        }

Please, what is going wrong that it does not want to execute when home.html its being loaded into the main html but when home.html is executed on its own it works? 请问，当home.html加载到主html中时，它不希望执行，但是当home.html单独执行时，它可以工作是怎么回事？

Answer 1

I know you've put a lot of work into what you have but it might be beneficial to look in to a jQuery plugin, such as Cycle. 我知道您已经做了很多工作，但是查看jQuery插件（例如Cycle）可能会有所帮助。 http://malsup.com/jquery/cycle http://malsup.com/jquery/cycle

Otherhand, you need to remove <script type="text/javascript" src="js/javascript.js"></script> from the Home.html page you are retrieving and have that in the head of the main.html file you are loading your secondary pages from. 另一方面，您需要从要检索的Home.html页面中删除<script type="text/javascript" src="js/javascript.js"></script> ，并将其Home.html main.html文件的开头您正在从中加载辅助页面。 It will be called not be executed inline via the AJAX load which is the problem you are having. 它将不会通过AJAX加载内联执行，这就是您遇到的问题。 So we move it to the main.html and we will call it manually when our home.html page is loaded. 因此，我们将其移至main.html并在加载home.html页面时手动调用它。

I've altered your AJAX method to take a callback method or function when AJAX is successful. 我已将您的AJAX方法更改为在AJAX成功时采用回调方法或函数。 You will see the third parameter to your AJAX method is the function to call when done, in our case it is startBSN you will see where I wrapped your js/javascript function further down with this method. 您将看到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]();
    }
}

I've removed your js/javascript.js and included it in the head of main.html , you should remove it from your home.html 我已经删除了您的js/javascript.js并将其包含在main.html的头中，您应该将其从home.html删除

I've also wrapped your js/javascript.js code into a callable function called startBSN otherwise it would run on page load as anonymous functions. 我还将您的js/javascript.js代码包装到一个名为startBSN的可调用函数中，否则它将在页面加载时作为匿名函数运行。

Here is your js.javascript file with the surrounding function startBSN 这是带有周围功能startBSN js.javascript文件

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;
    }
}

JavaScript无法执行

问题描述

1 个解决方案

解决方案1
0 已采纳 2013-01-06 18:24:38

JavaScript无法执行

问题描述

1 个解决方案

解决方案1 0 已采纳 2013-01-06 18:24:38

解决方案1
0 已采纳 2013-01-06 18:24:38