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 相关文章推荐
javascript css float属性的特殊写法
Nov 13 Javascript
25个非常棒的jQuery滑块插件和教程小结
Sep 02 Javascript
jQuery如何将选中的对象转化为原始的DOM对象
Jun 09 Javascript
JavaScript实现拖拽网页内元素的方法
Apr 15 Javascript
全面解析JavaScript中apply和call以及bind(推荐)
Jun 15 Javascript
AngularJs Scope详解及示例代码
Sep 01 Javascript
easyui tree带checkbox实现单选的简单实例
Nov 07 Javascript
JS实现图片放大缩小的方法
Feb 15 Javascript
EasyUI的TreeGrid的过滤功能的解决思路
Aug 08 Javascript
H5+C3+JS实现双人对战五子棋游戏(UI篇)
May 28 Javascript
Vue的编码技巧与规范使用详解
Aug 28 Javascript
JavaScript 防盗链的原理以及破解方法
Dec 29 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
实例讲解PHP表单处理
2019/02/15 PHP
FLASH 广告之外的链接
2008/12/16 Javascript
js 中 document.createEvent的用法
2010/08/29 Javascript
IE下使用cloneNode注意事项分享
2012/11/22 Javascript
将中国标准时间转换成标准格式的代码
2014/03/20 Javascript
javascript替换已有元素replaceChild()使用介绍
2014/04/03 Javascript
js确认删除对话框适用于a标签及submit
2014/07/10 Javascript
jQuery淡入淡出元素让其效果更为生动
2014/09/01 Javascript
JavaScript设计模式之代理模式介绍
2014/12/28 Javascript
JS实现表格数据各种搜索功能的方法
2015/03/03 Javascript
Bootstrap多级导航栏(级联导航)的实现代码
2016/03/08 Javascript
JavaScript 控制字体大小设置的方法
2016/11/23 Javascript
微信开发之调起摄像头、本地展示图片、上传下载图片实例
2016/12/08 Javascript
js时间控件只显示年月
2017/01/08 Javascript
bootstrap的常用组件和栅格式布局详解
2017/05/02 Javascript
十大 Node.js 的 Web 框架(快速提升工作效率)
2017/06/30 Javascript
深入浅析ES6 Class 中的 super 关键字
2017/10/20 Javascript
了解javascript中的Dom操作
2019/05/27 Javascript
20道JS原理题助你面试一臂之力(必看)
2019/07/22 Javascript
微信小程序点击顶部导航栏切换样式代码实例
2019/11/12 Javascript
js实现纯前端压缩图片
2020/11/16 Javascript
[03:08]Ti4观战指南上
2014/07/07 DOTA
Python的SQLalchemy模块连接与操作MySQL的基础示例
2016/07/11 Python
Python reduce()函数的用法小结
2017/11/15 Python
Python爬虫实现(伪)球迷速成
2018/06/10 Python
Django框架安装方法图文详解
2019/11/04 Python
keras的load_model实现加载含有参数的自定义模型
2020/06/22 Python
tensorflow基于CNN实战mnist手写识别(小白必看)
2020/07/20 Python
Python基于爬虫实现全网搜索并下载音乐
2021/02/14 Python
幼儿教师辞职信范文
2015/03/02 职场文书
教师工作能力自我评价
2015/03/04 职场文书
2015年出纳个人工作总结
2015/04/02 职场文书
就业意向书范本
2015/05/11 职场文书
医院员工辞职信范文
2015/05/12 职场文书
结婚喜宴祝酒词
2015/08/10 职场文书
总经理聘用协议书
2015/09/21 职场文书