2008-03-03

iframe实现Ajax刷新

关键字: ajax/javascript相关
以前的项目中用到了Ajax,采用的是Ajaxanywhere和iframe实现的局部刷新,现在做的项目中也要用到Ajax,顺便想起了iframe的刷新,虽然iframe的刷新不是异步的,但效果也相当不错.在网上也看到许多帖子里也写到了,在这里写上两个例子,也算是总结了,但有的代码是网上的例子改的,因为有的有点问题我都改了过来,可以直接运行看到效果的.
例一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>

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>


例二,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>


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 parent_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>
评论
发表评论

您还没有登录，请登录后发表评论