首页 > 其他分享 >js刷新页面 方法大全

js刷新页面 方法大全

时间:2023-06-15 12:06:24浏览次数:38  
标签:bottom js reload window html location 大全 页面


一、先来看一个简单的例子:
        下面以三个页面分别命名为frame.htmltop.htmlbottom.html为例来具体说明如何做。 
        
        frame.html 由上(top.html)下(bottom.html)两个页面组成,代码如下:

 1  <! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >  
 2  < HTML >  
 3  < HEAD >  
 4  < TITLE >  frame  </ TITLE >  
 5  </ HEAD >  
 6  < frameset  rows ="50%,50%" >  
 7     < frame  name =top  src ="top.html" >  
 8     < frame  name =bottom  src ="bottom.html" >  
 9  </ frameset >  
10  </ HTML >  


        现在假设top.html (即上面的页面) 有七个button来实现对bottom.html (即下面的页面) 的刷新,可以用以下七种语句,哪个好用自己看着办了。        1

top.html 页面的代码如下: 

 1  top.html 页面的代码如下: 
 2 
 3  <! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >  
 4  < HTML >  
 5  < HEAD >  
 6  < TITLE >  top.html  </ TITLE >  
 7  </ HEAD >  
 8  < BODY >  
 9    < input  type =button  value ="刷新1"  onclick ="window.parent.frames[1].location.reload()" >< br >  
10    < input  type =button  value ="刷新2"  onclick ="window.parent.frames.bottom.location.reload()" >< br >  
11    < input  type =button  value ="刷新3"  onclick ="window.parent.frames['bottom'].location.reload()" >< br >   
12    < input  type =button  value ="刷新4"  onclick ="window.parent.frames.item(1).location.reload()" >< br >  
13    < input  type =button  value ="刷新5"  onclick ="window.parent.frames.item('bottom').location.reload()" >< br >  
14    < input  type =button  value ="刷新6"  onclick ="window.parent.bottom.location.reload()" >< br >  
15    < input  type =button  value ="刷新7"  onclick ="window.parent['bottom'].location.reload()" >< br >  
16  </ BODY >  
17  </ HTML >  
18 

           下面是bottom.html页面源代码,为了证明下方页面的确被刷新了,在装载完页面弹出一个对话框。    1

1
 2<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
 3<HTML> 
 4<HEAD> 
 5<TITLE> bottom.html </TITLE> 
 6</HEAD> 
 7<BODY onl oad="alert('我被加载了!')"> 
 8   <h1>This is the content in bottom.html.</h1> 
 9</BODY> 
10</HTML> 

              解释一下:


1.window指代的是当前页面,例如对于此例它指的是top.html页面。 

2.parent指的是当前页面的父页面,也就是包含它的框架页面。例如对于此例它指的是framedemo.html。 

3.frames是window对象,是一个数组。代表着该框架内所有子页面。 

4.item是方法。返回数组里面的元素。 

5.如果子页面也是个框架页面,里面还是其它的子页面,那么上面的有些方法可能不行。 


附: 


Javascript刷新页面的几种方法: 

1 history.go(0) 
2 location.reload() 
3 locatinotallow=location 
4 location.assign(location) 
5 document.execCommand('Refresh') 
6 window.navigate(location) 
7 location.replace(location) 
8 document.URL=location.href


二、自动刷新页面

        1.页面自动刷新:把如下代码加入<head>区域中       


<  meta   http-equiv  ="refresh"   content
  ="20"
  >

其中20指每隔20秒刷新一次页面.        2.页面自动跳转:把如下代码加入<head>区域中


<  meta   http-equiv  ="refresh"   content  ="20;url=http://xcp.blogjava.net"
  >

其中20指隔20秒后跳转到http://xcp.blogjava.net页面       3.页面自动刷新js版

<  script language  =  "  JavaScript  "  >
   
      function   myrefresh() 
      { 
           window.location.reload(); 
    }   
    setTimeout('myrefresh()',  1000  );   //  指定1秒刷新一次   
  </
  script
  >


三、java在写Servler,Action等程序时,要操作返回页面的话(如谈出了窗口,操作完成以后,关闭当前页面,刷新父页面)

1  
          PrintWriter out   =   response.getWriter();
  2
  
        out.write(  "  <script  type=\  "  text  /  javascript\  "
  >
  "
  );
  3
  
             子窗口刷新父窗口   
  4
  
           out.write(
  "
  self.opener.location.reload();
  "
  ); 
  5
  
           //  关闭窗口  
  6
  
           out.write(
  "
  window.opener=null;
  "
  );
  7
  
         out.write(  "  window.close();  "  );
  8
  
         out.write(  "  </script>  "  );


四、JS刷新框架的脚本语句

        1.如何刷新包含该框架的页面用


<  script language  =  JavaScript  >   
  parent.location.reload(); 
  </
  script
  >

    

       2.子窗口刷新父窗口


<  script language  =  JavaScript  >   
    self.opener.location.reload(); 
  </
  script
  >


       3.如何刷新另一个框架的页面用 (上面的实例以说明了)

语句1. window.parent.frames[  1  ].location.reload(); 
语句2. window.parent.frames.bottom.location.reload(); 
语句3. window.parent.frames[  "  bottom  "  ].location.reload(); 
语句4. window.parent.frames.item(  1  ).location.reload(); 
语句5. window.parent.frames.item('bottom').location.reload(); 
语句6. window.parent.bottom.location.reload(); 
语句7. window.parent['bottom'].location.reload();

       4.如果想关闭窗口时刷新或者想开窗时刷新的话,在<body>中调用以下语句即可。 


<  body onl oad  =  "  opener.location.reload()  "  >   开窗时刷新 
  <
  body onUnload
  =
  "
  opener.location.reload()
  "
  >
   关闭时刷新 
  <
  script language
  =
  "
  javascript
  "
  >
   
    window.opener.document.location.reload() 
  </
  script
  >

标签:bottom,js,reload,window,html,location,大全,页面
From: https://blog.51cto.com/u_16065168/6486055

相关文章

  • 2023小红书web端搜索采集笔记视频点赞关注评论去水印接口源码nodejs
    文章标签:前端笔记java版权声明:本文只作学习研究,禁止用于非法用途,否则后果自负,如有侵权,请告知删除,谢谢!一、notejs接口调用方法(源码级别):获取笔记信息helpnow_get_note_by_id("笔记ID")获取当前用户信息helpnow_self_info()获取用户信息helpnow_user_info("用户ID")获取主页推......
  • JS混淆工具如何选?本文带你了解。
    什么是js混淆工具?js混淆工具是一种能够将js代码转换成难以阅读和理解的代码的工具,通常用于保护js代码的安全性和版权,防止被恶意修改或盗用。js混淆工具可以通过以下方式实现代码的混淆:变量重命名:将变量名替换成随机的字符或者无意义的单词,使得代码逻辑难以跟踪。字符串加密:将字符串......
  • MEF.postman_collection.json
    { "info":{ "_postman_id":"c41bc34c-dec8-4270-b3a4-e9a53b36c705", "name":"MEF", "schema":"https://schema.getpostman.com/json/collection/v2.0.0/collection.json" }, "item......
  • 基于AutoJs7实现的薅羊毛App专业版源码大分享
    源码下载链接:https://pan.baidu.com/s/1QvalXeUBE3dADfpVwzF_xg?pwd=0736提取码:0736 专业版肯定比个人版功能强大并且要稳定。增加了很多功能的同时也测试封号的App,对于封号的App,给予剔除。虽然App数量减少了但是都是稳定的且收益比较高的。并且一天也就刷那么十几个而已。 专业版......
  • 解决:js 根据图片链接(image url)下载,有的打开预览,有的下载
    1、问题描述https://*****/drugTestReport/20230515/202305151106111386737.pnghttps://*****/drugTestReport/20230605/202306051540314553141.jpg同样结构的两个图片链接,使用window.open(url),一个是打开预览,另一个是下载 2、解决方法,通过fetch请求url,获取blob类型,区分情况......
  • 22个常用Excel函数大全,直接套用,提升工作效率!
    Excel曾经一度出现了严重Bug,主要有两种比较悲催的情况,首先是这种: 更加悲催的是这种:  言归正传,今天和大家分享一组常用函数公式的使用方法:职场人士必须掌握的12个Excel函数,用心掌握这些函数,工作效率就会有质的提升。建议收藏备用着,有时间多学习操练下。目录:数字处理、判断公式、......
  • 大中小型厢式货车尺寸大全规格一览表
    货车尺寸大全有2.2/2.6/2.8/3/3.2/4.2/5.2/6.8//7.6/9.6/13/17.5米大型/中型/小型/轻型/微型货车,厢式货车尺寸、高栏货车、平板车等货车规格一览表,其货车吨位对照表载重在0.5/1/2/3/5/8/10/12/15/18/20/30/32吨不同载重货厢外尺寸、内尺寸规格参数。货车尺寸大全货车尺寸大全从......
  • 如何在Katalon Studio中解析JSON响应
    JSON响应示例假设我们有以下JSON响应,并且我们想要解析和检索其数据:{“menu”:{“id”:“文件”,“工具”:{“行动”:[{“id”:“新”,“标题”:“新文件”},{“id”:“开放”,“标题”:“打开文件......
  • Three.js教程:相机控件轨道控制器OrbitControls
    推荐:将NSDT场景编辑器加入你的3D工具链其他系列工具:NSDT简石数字孪生相机控件轨道控制器OrbitControls平时开发调试代码,或者展示模型的时候,可以通过相机控件OrbitControls实现旋转缩放预览效果。OrbitControls使用你可以打开课件案例源码测试下效果。旋转:拖动鼠标左键缩放......
  • nodejs 一些零碎buffer操作
    demo1constbuf1=Buffer.from([0x24,0x40,0x24,0x40]);console.log(buf1);console.log(buf1[0]);console.log(buf1[1]);console.log(buf1[2]);console.log(buf1[3]);constbuf2=Buffer.from([24,40,24,40]);console.log(buf2);console.log(buf2[0]);......