Question

我正在使用动态云端硬盘代码（http://www.dynamicdrive.com/dynamicindex17/ajaxcontent.htm）提供的ajaxpage功能。

我正在尝试将一个发送ajax内容请求的原始页面发送到div，以便在加载div后进行检测。

这就是我的尝试：

很多研究指出了这一点 jQuery中的功能。我不想在这里使用jQuery 项目
在加载的内容中包含脚本。这不起作用而且我认为这是由于此功能的限制。
我有试图监视div的不同状态，但似乎没有改变。

我真正需要的是在加载div内容后在主页面上调用函数的方法。

Answer 1

修改ajaxpage函数，为回调函数添加另一个参数，在onreadystatechange中调用你的函数。但我建议你改用jQuery。

更新：

这就是我的所作所为。我在你的函数 ajaxpage 中添加了一个名为 callback 的新参数，当你从 loadpage 我们得到一个真值时触发ajax事件onreadystatechange除了回调并确定我正在添加* page_request *和 containerid 参数的页面或内容。现在，您可以将该回调函数添加到ajaxpage函数中，在这种情况下，我使用名为myCallbackFunction的函数执行此操作。

我不建议你采用这种方法有更好的方法和最佳实践，如果你正在学习避免这种方式似乎已经过时了。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Ajax Rotating Includes Script</title>
<script type="text/javascript">

/***********************************************
* Dynamic Ajax Content- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

var loadedobjects = ""
var rootdomain = "http://" + window.location.hostname

    function ajaxpage(url, containerid, callback) {
        var page_request = false
        if (window.XMLHttpRequest) // if Mozilla, Safari etc
            page_request = new XMLHttpRequest()
        else if (window.ActiveXObject) { // if IE
            try {
                page_request = new ActiveXObject("Msxml2.XMLHTTP")
            } catch (e) {
                try {
                    page_request = new ActiveXObject("Microsoft.XMLHTTP")
                } catch (e) {}
            }
        } else
            return false
        page_request.onreadystatechange = function () {
            if (loadpage(page_request, containerid)) {
                if (callback)
                    callback(page_request, containerid);
            }
        }
        page_request.open('GET', url, true)
        page_request.send(null)
    }

    function loadpage(page_request, containerid) {
        if (page_request.readyState == 4 && (page_request.status == 200 || window.location.href.indexOf("http") == -1)) {
            document.getElementById(containerid).innerHTML = page_request.responseText
            return true;
        }
        return false;
    }

    function loadobjs() {
        if (!document.getElementById)
            return
        for (i = 0; i < arguments.length; i++) {
            var file = arguments[i]
            var fileref = ""
            if (loadedobjects.indexOf(file) == -1) { //Check to see if this object has not already been added to page before proceeding
                if (file.indexOf(".js") != -1) { //If object is a js file
                    fileref = document.createElement('script')
                    fileref.setAttribute("type", "text/javascript");
                    fileref.setAttribute("src", file);
                } else if (file.indexOf(".css") != -1) { //If object is a css file
                    fileref = document.createElement("link")
                    fileref.setAttribute("rel", "stylesheet");
                    fileref.setAttribute("type", "text/css");
                    fileref.setAttribute("href", file);
                }
            }
            if (fileref != "") {
                document.getElementsByTagName("head").item(0).appendChild(fileref)
                loadedobjects += file + " " //Remember this object as being already added to page
            }
        }
    }

    function myCallbackFunction(page_request,containerid) {
        // Do your stuff here 
        console.log("page_request", page_request);
        console.log("container id", containerid);
    }

</script>

<style type="text/css">
#leftcolumn{
float:left;
width:150px;
height: 400px;
border: 3px solid black;
padding: 5px;
padding-left: 8px;

}

#leftcolumn a{
padding: 3px 1px;
display: block;
width: 100%;
text-decoration: none;
font-weight: bold;
border-bottom: 1px solid gray;
}

#leftcolumn a:hover{
background-color: #FFFF80;
}

#rightcolumn{
float:left;
width:550px;
min-height: 400px;
border: 3px solid black;
margin-left: 10px;
padding: 5px;
padding-bottom: 8px;
}

* html #rightcolumn{ /*IE only style*/
height: 400px;
}
</style>
</head>

<body>

<div id="leftcolumn">
<a href="javascript:ajaxpage('ajaxfiles/external.htm', 'rightcolumn', myCallbackFunction);">Porsche Page</a>
<a href="javascript:ajaxpage('ajaxfiles/external2.htm', 'rightcolumn', myCallbackFunction);">Ferrari Page</a>
<a href="javascript:ajaxpage('ajaxfiles/external3.htm', 'rightcolumn',myCallbackFunction);">Aston Martin Page</a>

<div style="margin-top: 2em">Load CSS & JS files</div>
<a href="javascript:loadobjs('ajaxfiles/style.css', 'ajaxfiles/tooltip.js');">Load "style.css" and "tooltip.js"</a>

</div>

<div id="rightcolumn"><h3>Choose a page to load.</h3></div>
<div style="clear: left; margin-bottom: 1em"></div>

</body>

</html>

检测ajax div上加载的内容

1 个答案: