iframe实现Ajax刷新

最新推荐文章于 2017-12-12 08:18:32 发布

小黑师傅

最新推荐文章于 2017-12-12 08:18:32 发布

阅读量982

点赞数

分类专栏：【编程语言-javascript】文章标签： iframe ajax scripting function stylesheet html

本文链接：https://blog.csdn.net/sun305355024sun/article/details/4292544

版权

【编程语言-javascript】专栏收录该内容

10 篇文章 0 订阅

订阅专栏

iframe实现Ajax刷新

关键字: ajax/javascript相关

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

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代码

<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代码:

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">
<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代码:

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">
<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>

小黑师傅

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
iframe实现Ajax刷新

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

扫一扫