关键字: 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>
<!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 οnlοad="init();"> <DIV id="divId"> iframe page result content . </DIV> </body> </html>