如何在通过ajax加载的html中运行javascript

高高雅

2023-03-14

问题内容：

我有一个index.php文件，可通过此javascript / ajax代码加载其他php文件：

function AJAX(elementID,url,showStatus){
var httpObject;
if (window.ActiveXObject) {
    httpObject = new ActiveXObject("Microsoft.XMLHTTP");
}
if (window.XMLHttpRequest){
    httpObject =  new XMLHttpRequest();
}
else {
    alert("Your browser does not support AJAX.");       
}

if (httpObject != null) {
    httpObject.onreadystatechange = function() {          
        if (elementID != false){

            if (httpObject.readyState == 4 && httpObject.status == 200) {                  
                document.getElementById(elementID).innerHTML= httpObject.responseText;

            } 
        }

    }

    httpObject.open("POST",url,true);
    httpObject.send(null);  
}
}

因此，例如，我将通过以下方式在inxex.php中加载文件：

<script>
AJAX("updateThisDiv", "/includes/contentpage.php", false)
</script>

这会将“ contentpage.php”的内容粘贴到div“ updateThisDiv”中，但是现在如果我在“
contentpage.php”上有任何JavaScript，它将无法运行，有什么办法吗？

我已经看过了：http
:
//www.javascriptkit.com/script/script2/ajaxpagefetcher.shtml，
但它并不是我要找的东西。

我希望能够更新页面的一部分而无需重新加载整个页面，并且必须运行javascript

问题答案：

如果要按需加载Javascript。这可以通过动态创建脚本标签来完成。Stoyan
Stefanov
书-Javascript
Patterns中说明了这种模式

这是从书中摘录的：

编写一个require函数。然后这样称呼它：

require("extra.js", function () {
    functionDefinedInExtraJS();
});

样品要求功能：

function require(file, callback) {

    var script = document.getElementsByTagName('script')[0],
        newjs = document.createElement('script');

    // IE
    newjs.onreadystatechange = function () {
        if (newjs.readyState === 'loaded' || newjs.readyState === 'complete') {
            callback();
        }
    };

    // others
    newjs.onload = function () {
        callback();
    };

    newjs.src = file;
    script.parentNode.insertBefore(newjs, script);
}

在
http://www.jspatterns.com/book/8/ondemand.html中找到的实时示例

@Edit：针对您的情况的更多详细信息。我将尝试使事情变得简单：

创建fours文件：

index.php：测试文件。
code.js：具有Ajax，getJS，getHTML函数的实际代码
content.php：任何可以打印纯HTML而无需任何JS的PHP文件
content.js：要动态运行的javascript代码。

index.php

<html>
    <head>
        <script src="code.js"></script>
    </head>
    <body>
        <input type="button" onclick="Ajax('content.php', 'd_html');" value="Fill from content.php"/>
        <div id="d_html"></div>
        <br>
        <input type="button" onclick="Ajax('content.js', 'd_js');" value="Fill from content.js"/>
        <div id="d_js"></div>
    </body>
</html>

content.php

<span>Hello, I am dynamic span came from content.php</span>

content.js

//Ana javascript code you want to run it by Ajax function should go inside this function
function executeJS(element){
   element.innerHTML = "<span>Hello, I am dynamic span came from content.js</span>";
}

code.js

//This function responsible for doing the ajax request for any file that will return pure HTML.
function getHTML(url, element){
    var i, xhr, activeXids = [
        'MSXML2.XMLHTTP.3.0',
        'MSXML2.XMLHTTP',
        'Microsoft.XMLHTTP'
    ];

    if (typeof XMLHttpRequest === "function") { // native XHR
        xhr =  new XMLHttpRequest();        
    } else { // IE before 7
        for (i = 0; i < activeXids.length; i += 1) {
            try {
                xhr = new ActiveXObject(activeXids[i]);
                break;
            } catch (e) {}
        }
    }

    xhr.onreadystatechange = function () {
        if (xhr.readyState !== 4) {
            return false;
        }
        if (xhr.status !== 200) {
            alert("Error, status code: " + xhr.status);
            return false;
        }

        element.innerHTML += xhr.responseText;
    };

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

//This function will load javascript file on-demand and call executeJS function inside that file.
function getJS(url, element, cb){
    var newjs = document.createElement('script');

    // IE
    newjs.onreadystatechange = function () {
        if (newjs.readyState === 'loaded' || newjs.readyState === 'complete') {
            cb();
        }
    };

    // others
    newjs.onload = function () {
        cb();
    };

    newjs.src = url;
    element.appendChild(newjs);
}


//This is same as your function, but now can handle both PHP and JS files
function Ajax(url, id){
    var element = document.getElementById(id),
        regex = /\.js$/;
    if(!element){
        alert("Invalid ID");
        return false;
    }

    if(regex.test(url)){ //If url ends with JS, load using getJS
        getJS(url, element, function(){
            executeJS(element);
        });
    } else {
        getHTML(url, element);
    }
}

如何在通过ajax加载的html中运行javascript

相关阅读

相关文章

相关问答

相关工具

相关文档