Question

我有一个执行AJAX调用并加载整个页面的页面。加载的页面有一些Javascript。 javascript在加载时在页面上自行工作，但是当它被AJAX加载时，Javascript不起作用。我不知道我错过了什么。

已加载页面的代码

<html>
<script type="text/javascript">
function showfield(name){
if(name=='lstbox')document.getElementById('div1').style.display="block";
else document.getElementById('div1').style.display="none";
}

function hidefield() {
document.getElementById('div1').style.display='none';
}

</script>

<head>
</head>
<body onload="hidefield()">
<form action = "test2.php" method = "post">

Please enter a name for the App <input type = "text" name = "name">

<table border = "1"><tr><th>Choose a Label</th><th>Choose an element</th></tr>

<tr><td><input type = "text" name = "label1" /></td> <td> 

<select name = "elementtype1" id="elementtype1" onchange="showfield(this.options[this.selectedIndex].value)">

<option value = 'select'> Select </option>

<option value='txtbox'>Text Box</option>

<option value='lstbox'>List Box</option>

<option value='chkbox'>Check Box</option>

<option value='radio'>Radio Button</option>

</select></td><td><div id="div1">Enter Listbox options: <input type="text" name="whatever1" /></div></td></tr>

</table>

<input type = "submit" value = "Submit">

</form>

</body>

</html>

加载代码（AJAX）

<html>
<head>
</head>
<body>

<script src="ajax.js" type="text/javascript"></script>
<script src="responseHTML.js" type="text/javascript"></script>

<div id="storage" style="display:none;">
</div>

<div id="displayed">



<FORM name="ajax" method="POST" action="">
    <p>

    <INPUT type="BUTTON" value="Get the Panel"  ONCLICK="loadWholePage('appcreator.php')">

    </p>

</FORM>
</div>



</body>
</html>

ajax.js代码

function createXHR() 
{
    var request = false;
        try {
            request = new ActiveXObject('Msxml2.XMLHTTP');
        }
        catch (err2) {
            try {
                request = new ActiveXObject('Microsoft.XMLHTTP');
            }
            catch (err3) {
        try {
            request = new XMLHttpRequest();
        }
        catch (err1) 
        {
            request = false;
        }
            }
        }
    return request;
}

responseHTML.js代码

function getBody(content) 
{
   test = content.toLowerCase();    // to eliminate case sensitivity
   var x = test.indexOf("<body");
   if(x == -1) return "";

   x = test.indexOf(">", x);
   if(x == -1) return "";

   var y = test.lastIndexOf("</body>");
   if(y == -1) y = test.lastIndexOf("</html>");
   if(y == -1) y = content.length;    // If no HTML then just grab everything till end

   return content.slice(x + 1, y);   
} 

/**
    Loads a HTML page
    Put the content of the body tag into the current page.
    Arguments:
        url of the other HTML page to load
        id of the tag that has to hold the content
*/      

function loadHTML(url, fun, storage, param)
{
    var xhr = createXHR();
    xhr.onreadystatechange=function()
    { 
        if(xhr.readyState == 4)
        {
            //if(xhr.status == 200)
            {
                storage.innerHTML = getBody(xhr.responseText);
                fun(storage, param);
            }
        } 
    }; 

    xhr.open("GET", url , true);
    xhr.send(null); 

} 

    /**
        Callback
        Assign directly a tag
    */      


    function processHTML(temp, target)
    {
        target.innerHTML = temp.innerHTML;
    }

    function loadWholePage(url)
    {
        var y = document.getElementById("storage");
        var x = document.getElementById("displayed");
        loadHTML(url, processHTML, x, y);
    }   


    /**
        Create responseHTML
        for acces by DOM's methods
    */  

    function processByDOM(responseHTML, target)
    {
        target.innerHTML = "Extracted by id:<br />";

        // does not work with Chrome/Safari
        //var message = responseHTML.getElementsByTagName("div").namedItem("two").innerHTML;
        var message = responseHTML.getElementsByTagName("div").item(1).innerHTML;

        target.innerHTML += message;

        target.innerHTML += "<br />Extracted by name:<br />";

        message = responseHTML.getElementsByTagName("form").item(0);
        target.innerHTML += message.dyn.value;
    }

    function accessByDOM(url)
    {
        //var responseHTML = document.createElement("body");    // Bad for opera
        var responseHTML = document.getElementById("storage");
        var y = document.getElementById("displayed");
        loadHTML(url, processByDOM, responseHTML, y);
    }

Answer 1

通过AJAX加载HTML的Javascript将不会被执行。

如果要动态添加脚本，请将<script>标记附加到现有加载页面的<head>元素。

Answer 2

脚本在body标签之外，加载器只选择body标签内的代码，因此脚本甚至不是你添加到页面中的一部分。

Answer 3

使用jquery而不是innerHTML执行脚本

//this is not working! 
document.getElementById("chart-content").innerHTML = this.responseText;

//try this
$("#chart-content").html(this.responseText);

Answer 4

在<head>中加载Js应该可以。用这个。

if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', loadJs);
} else {
    loadJs();
}

function loadJs() {
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = '/assets/script/editor-controlls.js';
    script.defer = true
    document.getElementsByTagName('head')[0].appendChild(script);
}

Javascript不适用于AJAX调用

4 个答案: