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


Posted in Javascript onJanuary 06, 2016

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实现局部刷新的几种方法汇总,希望大家根据自己的需求选择适合自己的,有任何问题欢迎给我留言,谢谢!

Javascript 相关文章推荐
去除链接虚线全面分析总结
Aug 15 Javascript
javascript 广告后加载,加载完页面再加载广告
Nov 25 Javascript
Jquery中val()表单取值赋值的实例代码
Aug 15 Javascript
使用jquery实现IE下按backspace相当于返回操作
Mar 18 Javascript
jQuery中关于ScrollableGridPlugin.js(固定表头)插件的使用逐步解析
Jul 17 Javascript
jQuery中offsetParent()方法用法实例
Jan 19 Javascript
javascript嵌套函数和在函数内调用外部函数的区别分析
Jan 31 Javascript
微信小程序 this和that详解及简单实例
Feb 13 Javascript
详解Vue路由开启keep-alive时的注意点
Jun 20 Javascript
Vue中的scoped实现原理及穿透方法
May 15 Javascript
vue3.0 CLI - 2.4 - 新组件 Forms.vue 中学习表单
Sep 14 Javascript
AJAX XMLHttpRequest对象创建使用详解
Aug 20 Javascript
JavaScript iframe数据共享接口实现方法
Jan 06 #Javascript
js实现仿qq消息的弹出窗效果
Jan 06 #Javascript
2016年最热门的15 款代码语法高亮工具,美化你的代码
Jan 06 #Javascript
详解jQuery Mobile自定义标签
Jan 06 #Javascript
谷歌Chrome浏览器扩展程序开发小记
Jan 06 #Javascript
JavaScript类型系统之基本数据类型与包装类型
Jan 06 #Javascript
4种JavaScript实现简单tab选项卡切换的方法
Jan 06 #Javascript
You might like
《心理测量者3》剧场版动画预告
2020/03/02 日漫
全国FM电台频率大全 - 12 安徽省
2020/03/11 无线电
php5.4传引用时报错问题分析
2016/01/22 PHP
php多文件打包下载的实例代码
2017/07/12 PHP
php防止表单重复提交实例讲解
2019/02/11 PHP
javascript 密码强弱度检测万能插件
2009/02/25 Javascript
基于JQuery制作的产品广告效果
2010/12/08 Javascript
JavaScript控制图片加载完成后调用回调函数的方法
2015/03/20 Javascript
Javascript变量的作用域和作用域链详解
2015/04/02 Javascript
第一次接触神奇的Bootstrap导航条
2016/08/09 Javascript
微信js-sdk上传与下载图片接口用法示例
2016/10/12 Javascript
jQuery弹出div层过2秒自动消失
2016/11/29 Javascript
基于jQuery实现手风琴菜单、层级菜单、置顶菜单、无缝滚动效果
2017/07/20 jQuery
自定义类似于jQuery UI Selectable 的Vue指令v-selectable
2017/08/23 jQuery
js仿微信抢红包功能
2020/09/25 Javascript
vue2.0s中eventBus实现兄弟组件通信的示例代码
2017/10/25 Javascript
JS+CSS实现网页加载中的动画效果
2017/10/27 Javascript
NodeJS实现自定义流的方法
2018/08/01 NodeJs
VSCode搭建Vue项目的方法
2020/04/30 Javascript
vue 子组件和父组件传值的示例
2020/09/11 Javascript
jQuery实现可以扩展的日历
2020/12/01 jQuery
Django中实现一个高性能计数器(Counter)实例
2014/07/09 Python
深入Python解释器理解Python中的字节码
2015/04/01 Python
python数据结构之图的实现方法
2015/07/08 Python
Python AES加密模块用法分析
2017/05/22 Python
详解使用PyInstaller将Pygame库编写的小游戏程序打包为exe文件
2019/08/23 Python
Django Path转换器自定义及正则代码实例
2020/05/29 Python
关于python的缩进规则的知识点详解
2020/06/22 Python
Mankind西班牙男士护肤品网站:购买皮肤护理、护发和剃须
2017/04/27 全球购物
英国花园药房: The Garden Pharmacy
2017/12/28 全球购物
高一英语教学反思
2014/01/22 职场文书
优秀小学生家长评语
2014/01/30 职场文书
服装设计专业求职信
2014/06/16 职场文书
2014年监理工作总结范文
2014/11/17 职场文书
MySQL安装失败的原因及解决步骤
2022/06/14 MySQL
java获取一个文本文件的编码(格式)信息
2022/09/23 Java/Android