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 相关文章推荐
如何用js控制css中的float的代码
Aug 16 Javascript
json数据与字符串的相互转化示例
Sep 18 Javascript
JavaScript伸缩的菜单简单示例
Dec 03 Javascript
node.js [superAgent] 请求使用示例
Mar 13 Javascript
jquery利用json实现页面之间传值的实例解析
Dec 12 Javascript
Linux CentOS系统下安装node.js与express的方法
Apr 01 Javascript
Angularjs使用过滤器完成排序功能
Sep 20 Javascript
jQuery中库的引用方法
Jan 06 jQuery
原生JS使用Canvas实现拖拽式绘图功能
Jun 05 Javascript
vue prop属性传值与传引用示例
Nov 13 Javascript
微信小程序地图绘制线段并且测量(实例代码)
Jan 02 Javascript
Vue2.x和Vue3.x的双向绑定原理详解
Nov 05 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
漫威DC即将合作联动,而双方早已经秘密开始
2020/04/09 欧美动漫
PHP中的排序函数sort、asort、rsort、krsort、ksort区别分析
2014/08/18 PHP
ThinkPHP连接数据库及主从数据库的设置教程
2014/08/22 PHP
完美实现wordpress禁止文章修订和自动保存的方法
2014/11/03 PHP
PHP多线程之内部多线程实例分析
2015/03/09 PHP
PHP环境搭建(php+Apache+mysql)
2016/11/14 PHP
可以支持多中格式的JS键盘
2007/05/02 Javascript
JavaScript 学习笔记之一jQuery写法图片等比缩放以及预加载
2012/06/28 Javascript
Js(JavaScript)中,弹出是或否的选择框示例(confirm用法的实例分析)
2013/07/09 Javascript
PHP+jQuery实现随意拖动层并即时保存拖动位置
2015/04/30 Javascript
javascript jquery对form元素的常见操作详解
2016/06/12 Javascript
15位和18位身份证JS校验的简单实例
2016/07/18 Javascript
JS实现隐藏同级元素后只显示JS文件内容的方法
2016/09/04 Javascript
javascript使用 concat 方法对数组进行合并的方法
2016/09/08 Javascript
微信小程序 前端源码逻辑和工作流详解
2016/10/08 Javascript
angular2 ng2 @input和@output理解及示例
2017/10/10 Javascript
require.js 加载过程与使用方法介绍
2018/10/30 Javascript
微信小程序实现锚点跳转
2020/11/23 Javascript
[52:36]VGJ.S vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
Python yield 小结和实例
2014/04/25 Python
python3简单实现微信爬虫
2015/04/09 Python
python实现12306登录并保存cookie的方法示例
2019/12/17 Python
Python实现动态给类和对象添加属性和方法操作示例
2020/02/29 Python
通过代码简单了解django model序列化作用
2020/11/12 Python
中国高端鲜花第一品牌:roseonly(一生只送一人)
2017/02/12 全球购物
Crocs波兰官方商店:女鞋、男鞋、童鞋、洞洞鞋
2019/10/08 全球购物
2014最新离职证明范本
2014/09/12 职场文书
高三英语复习计划
2015/01/19 职场文书
销售员岗位职责
2015/02/10 职场文书
公司优秀员工推荐信
2015/03/24 职场文书
纯CSS实现酷炫的霓虹灯效果
2021/04/13 HTML / CSS
redis实现共同好友的思路详解
2021/05/26 Redis
浅谈Golang 切片(slice)扩容机制的原理
2021/06/09 Golang
解决SpringCloud Feign传对象参数调用失败的问题
2021/06/23 Java/Android
基于PyQT5制作一个桌面摸鱼工具
2022/02/15 Python
python数字图像处理实现图像的形变与缩放
2022/06/28 Python