iframe实现Ajax刷新
关键字: ajax/javascript相关
以前的项目中用到了Ajax,采用的是Ajaxanywhere和iframe实现的局部刷新,现在做的项目中也要用到Ajax,顺便想起了iframe的刷新,虽然iframe的刷新不是异步的,但效果也相当不错.在网上也看到许多帖子里也写到了,在这里写上两个例子,也算是总结了,但有的代码是网上的例子改的,因为有的有点问题我都改了过来,可以直接运行看到效果的.
例一iframe.html代码如下:
server.html代码如下:
例二,a.html代码:
b.html代码:
例一iframe.html代码如下:
- <html>
- <head>
- <title>Example of remote scripting in an IFRAME</title>
- <script >
- function tosay(){
- alert('this function is called from server.html');
- }
- function target(){
- var ifrm = document.getElementsByName('passframe')[0];
- ifrm = document.getElementById('passframe');
- ifrm.src = 'server.html';
- }
- </script>
- </head>
- <body>
- <h1>Remote Scripting with an TFRAME </h1>
- <iframe id="passframe" name="passframe" style="width:0px;height:0px;border:0px;" src="about:blank"></iframe>
- <a href="javascript:target();">call the server</a>
- <input type="button" value="button" src="server.html" onclick="target();">
- </body>
- </html>
<html>
<head>
<title>Example of remote scripting in an IFRAME</title>
<script >
function tosay(){
alert('this function is called from server.html');
}
function target(){
var ifrm = document.getElementsByName('passframe')[0];
ifrm = document.getElementById('passframe');
ifrm.src = 'server.html';
}
</script>
</head>
<body>
<h1>Remote Scripting with an TFRAME </h1>
<iframe id="passframe" name="passframe" style="width:0px;height:0px;border:0px;" src="about:blank"></iframe>
<a href="javascript:target();">call the server</a>
<input type="button" value="button" src="server.html" οnclick="target();">
</body>
</html>
server.html代码如下:
- <html>
- <head>
- <title>the server</title>
- </head>
- <script>
- //window.parent.tosay();
- function init(){
- alert("server page init");
- parent.tosay();
- }
- </script>
- <body onload="init();">
- </body>
- </html>
<html>
<head>
<title>the server</title>
</head>
<script>
//window.parent.tosay();
function init(){
alert("server page init");
parent.tosay();
}
</script>
<body οnlοad="init();">
</body>
</html>
例二,a.html代码:
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
- <html>
- <head>
- <title>a.html</title>
- <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
- <meta http-equiv="description" content="this is my page">
- <meta http-equiv="content-type" content="text/html; charset=UTF-8">
- <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
- <script>
- function changeDiv(){
- var iframeObj = document.getElementById("workFrame");
- iframeObj.src="b.html";
- }
- function changeFrom(){
- document.formName.target="workFrame";
- document.formName.submit();
- }
- </script>
- </head>
- <body>
- <input type="button" name="" value="Change Div" onclick="changeDiv();">
- <input type="button" name="" value="Form div" onclick="changeFrom();">
- <a onclick="changeDiv();">changeDiv</a>
- <DIV id="divId">
- Main page Content
- </DIV>
- <Form id="formId" name="formName" action="b.html">
- </Form>
- <iframe id="workFrame" width="0" height="0" src=""></iframe>
- </body>
- </html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>a.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<script>
function changeDiv(){
var iframeObj = document.getElementById("workFrame");
iframeObj.src="b.html";
}
function changeFrom(){
document.formName.target="workFrame";
document.formName.submit();
}
</script>
</head>
<body>
<input type="button" name="" value="Change Div" οnclick="changeDiv();">
<input type="button" name="" value="Form div" οnclick="changeFrom();">
<a οnclick="changeDiv();">changeDiv</a>
<DIV id="divId">
Main page Content
</DIV>
<Form id="formId" name="formName" action="b.html">
</Form>
<iframe id="workFrame" width="0" height="0" src=""></iframe>
</body>
</html>
b.html代码:
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
- <html>
- <head>
- <title>b.html</title>
- <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
- <meta http-equiv="description" content="this is my page">
- <meta http-equiv="content-type" content="text/html; charset=UTF-8">
- <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
- <script>
- function init(){
- try{
- alert("page b");
- var div = document.getElementById("divId");
- var parentparent_div = parent.document.getElementById("divId");
- if(div){
- parent_div.innerHTML = div.innerHTML;
- }
- }catch(e){
- alert(e);
- }
- }
- </script>
- </head>
- <body onload="init();">
- <DIV id="divId">
- iframe page result content .
- </DIV>
- </body>
- </html>