使用Ajax加载iframe [英] Loading an iframe with ajax
问题描述
我有一个页面，其中包含耗时的PHP脚本.有人建议我用ajax调用该PHP脚本.现在，脚本以这种方式加载.
I have a page with a time consuming PHP script. Someone recommended that I call that PHP script with ajax. Now the script is loaded in this way.
<div id="content-body" style="margin-top: 0px;"><a name="top"></a>
<h1>
<iframe src="calendar/index.php?cP=2" style="position: absolute; top: 0px; padding: 0px 0px 0px 0px; border: 1px solid #404040;" width="780px" height="691px"></iframe>
</h1>
</div> <!-- End CONTENT-BODY div -->
如何修改代码以使用ajax加载index.php页面?
How should the code be modified to load the index.php page with ajax instead?
我想我将需要在iframe onload函数中进行一个javascript函数调用.因此，HTML可能看起来像这样.
I imagine that I will need to have a javascript function call in the iframe onload function. So the HTML might look like this.
<iframe id="litcal" onload="LoadCalendar();"></iframe>
ajax函数可能看起来像这样.
The ajax function might look like this.
<script type="text/javascript">
var http = false;
if(navigator.appName == "Microsoft Internet Explorer") {
http = new ActiveXObject("Microsoft.XMLHTTP");
} else {
http = new XMLHttpRequest();
}
function LoadCalendar() {
http.abort();
http.open("GET", "calendar/index.php?cP=2", true);
http.onreadystatechange=function() {
if(http.readyState == 4) {
document.getElementById('litcal').src = http.responseText;
}
}
http.send(null);
}
</script>
我不太了解ajax.所以我想知道显示的代码是否正确，以加载iframe.
I don't really know ajax. So I want to know if the code shown is right to load the iframe.
谢谢.
推荐答案
问题是PHP脚本未返回URL.因此，无法将http.responseText分配给src.切换到div并将http.responsetext分配给div的innerHTML起作用了.有效的脚本是这样.
The problem was that the PHP script wasn't returning a URL. So the http.responseText could not be assigned to a src. Switching to a div and assigning the http.responsetext to the div innerHTML worked. The script that works is this.
<script type="text/javascript">
var http = false;
if(navigator.appName == "Microsoft Internet Explorer") {
http = new ActiveXObject("Microsoft.XMLHTTP");
} else {
http = new XMLHttpRequest();
}
function LoadCalendar() {
http.abort();
http.open("GET", "luxcal/index.php?cP=2", true);
http.onreadystatechange=function() {
if(http.readyState == 4) {
/* document.getElementById('litcal').src = http.responseText; */
document.getElementById('litcal').innerHTML = http.responseText;
}
}
http.send(null);
}
</script>
HTML是这个.
<body onload="appendTitle('Calendar');">
<div id="content-body"><a name="top"></a>
<h1>
<!-- iframe src="luxcal/index.php?cP=41" style="padding: 0px 0px 0px 0px; border: 1px solid #404040;" width="690px" -->
<!-- iframe id="litcal" onload="LoadCalendar();" style="padding: 0px 0px 0px 0px; border: 1px solid #404040;" width="690px"
height="691px"> <div id="litdiv"> </div></iframe -->
<div id="litcal" style="padding: 0px 0px 0px 0px; border: 1px solid #404040; width: 690px;
height: 691px;"> </div>
<script type="text/javascript">
LoadCalendar();
</script>
</h1>
</div> <!-- End CONTENT-BODY div -->
</body>
这篇关于使用Ajax加载iframe的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
