JavaScript中iframe实现局部刷新的几种方法汇总

前端技术 2023/09/06 JavaScript

Iframe是一种嵌入网页的框架形式，Web页面可以通过更改嵌入的部分，达到部分内容刷新。

Iframe的用法与普通的标签元素DIV类似，可以指定在页面中嵌入的位置、颜色、界面布局等

一、iframe实现局部刷新方法一

<script type=\"text/javascript\">
 $(function(){
 $(\"#a1\").click(function(){
  var name= $(this).attr(\"name\");
  $(\"#iframe\").attr(\"src\",name).ready();
 })
 $(\"#a2\").click(function(){
  var name= $(this).attr(\"name\");
  $(\"#iframe\").attr(\"src\",name).ready();
 })
})
</script>
<a href=\"#\" id=\"a1\" name=\"a1.html\">1</a>
<a href=\"#\" id=\"a2\" name=\"a2.html\">2</a>
<iframe src=\"\" id=\"iframe\"></iframe>

 当点a1时在iframe里显示a1.html的内容，点a2时在iframe里显示a2.html的内容

二、iframe实现局部刷新的方法二

<a href=\"a1.html\" id=\"a1\" name=\"a1.html\" target=\"i\">1</a>
<a href=\"a2.html\" id=\"a2\" name=\"a2.html\" target=\"i\">2</a>
<iframe src=\"\" id=\"iframe\" name=\"i\"></iframe>

备注： <form> 同样也有target属性，作用和<a>一样 这个方式如果<from>或<a>提交到某个Action中再跳转到a1.html中效果一样，如果在Action中有req.set或session.set，最后在iframe中同样可以显示出来。

三：iframe实现局部刷新的方法三:

<iframe src=\"1.htm\" name=\"ifrmname\" 
id=\"ifrmid\"></iframe>

方案一:用iframe的name属性定位

<input type=\"button\" name=\"Button\" value=\"Button\" onclick=\"document.frames(\'ifrmname\').location.reload()\">

或

<input type=\"button\" name=\"Button\" value=\"Button\" onclick=\"document.all.ifrmname.document.location.reload()\">

方案二:用iframe的id属性定位

<input type=\"button\" name=\"Button\" value=\"Button\" onclick=\"ifrmid.window.location.reload()\">

方案三:当iframe的src为其它网站地址(跨域操作时)

<input type=\"button\" name=\"Button\" value=\"Button\" onclick=\"window.open(document.all.ifrmname.src,\'ifrmname\',\'\')\">

方案四:通过和替换iframe的src来实现局部刷新

可以用document.getElementById(\"iframname\").src=\"\"来进行iframe得重定向；

示例代码如下：test.html

<!DOCTYPE html>
<html xmlns=\"http://www.w3.org/1999/xhtml\">
<head>
 <meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\" />
 <title></title>
 <script type=\"text/javascript\">
  function partRefresh() {
   document.getElementById(\"iframe1Id\").src = \"a2.html\"; // 方法一: 通过和替换iframe的src来实现局部刷新
  }
 </script>
 </head>
 <body>
  <table border=\"1\" width=\"90%\" align=\"center\">
   <tr
    style=\"background: #F0F0E4\"><td>方格1</td><td>方格2</td> <td>方格3</td>
   </tr>
   <tr>
    <td>
     <iframe src=\"a1.html\" id=\"iframe1Id\" name=\"iframe1Name\" width=\"100%\"></iframe>
    </td>
    <td>
     <iframe src=\"a2.html\" id=\"iframe2Id\" name=\"iframe2Name\" width=\"100%\"></iframe>
    </td>
    <td>
     <iframe src=\"a3.html\" id=\"iframe3Id\" name=\"iframe3Name\" width=\"100%\"></iframe>
    </td>
   </tr>
  </table>
  <br>
  <br>
  <input type=\"button\" value=\"IFRAME局部刷新\" style=\"margin-left: 70px;\" onclick=\"partRefresh();\">
 </body>
</html>

以上内容给大家介绍了JavaScript中iframe实现局部刷新的几种方法汇总，希望大家根据自己的需求选择适合自己的，有任何问题欢迎给我留言，谢谢！

本文地址：https://www.stayed.cn/item/17520

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案