iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > node.js >JavaScript怎么实现刷新框架及页面的功能
  • 601
分享到

JavaScript怎么实现刷新框架及页面的功能

2024-04-02 19:04:59 601人浏览 独家记忆
摘要

这篇文章主要讲解了“javascript怎么实现刷新框架及页面的功能”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“JavaScript怎么实现刷新框架及页面

这篇文章主要讲解了“javascript怎么实现刷新框架及页面的功能”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“JavaScript怎么实现刷新框架及页面的功能”吧!

先来看一个简单的例子

下面以三个页面分别命名为frame.html、top.html、bottom.html为例来具体说明如何做。

frame.html 由上(top.html)下(bottom.html)两个页面组成,代码如下:

<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >    < HTML >    < HEAD >    < TITLE >  frame  </ TITLE >    </ HEAD >     < frameset  rows ="50%,50%" >    < frame  name =top  src ="top.html" >    < frame  name =bottom  src ="bottom.html" >    </ frameset >    </ HTML >&nbsp;

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

语句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();

top.html 页面的代码如下:

<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >    < HTML >      < HEAD >       < TITLE >  top.html  </ TITLE >      </ HEAD >    < BODY >    < input  type =button  value ="刷新1"  onclick ="window.parent.frames[1].location.reload()" >< br >    < input  type =button  value ="刷新2"  onclick ="window.parent.frames.bottom.location.reload()" >< br >    < input  type =button  value ="刷新3"  onclick ="window.parent.frames['bottom'].location.reload()" >< br >    < input  type =button  value ="刷新4"  onclick ="window.parent.frames.item(1).location.reload()" >< br >    < input  type =button  value ="刷新5"  onclick ="window.parent.frames.item('bottom').location.reload()" >< br >    < input  type =button  value ="刷新6"  onclick ="window.parent.bottom.location.reload()" >< br >    < input  type =button  value ="刷新7"  onclick ="window.parent['bottom'].location.reload()" >< br >    </ BODY >    </ HTML >

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

bottom.html 页面的代码如下:

<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >    < HTML >      < HEAD >       < TITLE >  bottom.html  </ TITLE >      </ HEAD >    < BODY  onload ="alert('我被加载了!')" >    < h2 > This is the content in bottom.html. </ h2 >    </ BODY >    </ HTML >

解释一下:

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

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

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

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

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

附:

Javascript刷新页面的几种方法:

1   history.Go(0)

2   location.reload()

3   location=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://www.wyxg.com">

其中20指隔20秒后跳转到http://www.wyxg.com页面

3.页面自动刷新js

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

ASP.NET如何输出刷新父窗口脚本语句

1.  this.response.write("<script>opener.location.reload();</script>");

2.  this.response.write("<script>opener.window.location.href = opener.window.location.href;</script>"); 

3.  Response.Write("<script language=javascript>opener.window.navigate(''你要刷新的页.asp'');</script>")

JS刷新框架的脚本语句

//如何刷新包含该框架的页面用     <script language=JavaScript>    parent.location.reload();  </script>     //子窗口刷新父窗口  <script language=JavaScript>     self.opener.location.reload();  </script>   ( 或 <a href="javascript:opener.location.reload()"> 刷新 </a>   )   //如何刷新另一个框架的页面用     <script language=JavaScript>    parent.另一FrameID.location.reload();  </script> &nbsp;

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

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

感谢各位的阅读,以上就是“JavaScript怎么实现刷新框架及页面的功能”的内容了,经过本文的学习后,相信大家对JavaScript怎么实现刷新框架及页面的功能这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是编程网,小编将为大家推送更多相关知识点的文章,欢迎关注!

--结束END--

本文标题: JavaScript怎么实现刷新框架及页面的功能

本文链接: https://www.lsjlt.com/news/80513.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • JavaScript怎么实现刷新框架及页面的功能
    这篇文章主要讲解了“JavaScript怎么实现刷新框架及页面的功能”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“JavaScript怎么实现刷新框架及页面...
    99+
    2024-04-02
  • Ajax中怎么实现页面无刷新功能
    Ajax中怎么实现页面无刷新功能,相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。ajax (ajax开发)AJAX即“Asynchronous ...
    99+
    2024-04-02
  • JavaScript如何实现页面的刷新
    这篇文章主要讲解了“JavaScript如何实现页面的刷新”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“JavaScript如何实现页面的刷新”吧! ...
    99+
    2024-04-02
  • JavaScript中怎么刷新页面
    小编给大家分享一下JavaScript中怎么刷新页面,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧! ...
    99+
    2024-04-02
  • Vue怎么实现刷新页面
    这篇文章主要介绍“Vue怎么实现刷新页面”,在日常操作中,相信很多人在Vue怎么实现刷新页面问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”Vue怎么实现刷新页面”的疑惑有所帮助!接下来,请跟着小编一起来学习吧...
    99+
    2023-07-04
  • thinkphp怎么实现页面的刷新
    本篇内容主要讲解“thinkphp怎么实现页面的刷新”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“thinkphp怎么实现页面的刷新”吧!一、页面刷新的基本含义在网站开发过程中,页面刷新是指在当...
    99+
    2023-07-05
  • ajax中怎么实现无刷新分页功能
    本篇文章给大家分享的是有关ajax中怎么实现无刷新分页功能,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。html页<html> &...
    99+
    2024-04-02
  • Vue实现页面的局部刷新(router-view页面刷新)
    利用Vue里面的provide+inject组合 首先需要修改App.vue。 <template> <!-- 公司管理 --> <di...
    99+
    2024-04-02
  • 使用javascript怎么刷新页面
    使用javascript怎么刷新页面?相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。javascript刷新页面的方法:1、使用“location.reload()”;2、使用“...
    99+
    2023-06-14
  • 使用javascript怎么实现页面无刷新更新数据
    这篇文章给大家介绍使用javascript怎么实现页面无刷新更新数据,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。 首先在服务器上建立一个CheckUser.asp文件,用来检测用户是否存在,根据用户是否存在...
    99+
    2023-06-10
  • vue中实现页面刷新以及局部刷新的方法
    目录一.全页面刷新二、局部刷新三、应用场景总结一.全页面刷新 1.修改 App.vue,代码如下: <template> <div id="app"> ...
    99+
    2024-04-02
  • 使用AJAX怎么实现无刷新分页功能
    使用AJAX怎么实现无刷新分页功能,相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。  首先讲一下原理:分页有两个要点:1.有多少页,2.每页有多...
    99+
    2024-04-02
  • jquery如何实现修改值后刷新页面功能
    本文小编为大家详细介绍“jquery如何实现修改值后刷新页面功能”,内容详细,步骤清晰,细节处理妥当,希望这篇“jquery如何实现修改值后刷新页面功能”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。在Web开发中...
    99+
    2023-07-05
  • vue中如何实现页面刷新以及局部刷新
    vue中如何实现页面刷新以及局部刷新,相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。一.全页面刷新修改 App.vue,代码如下:<template> &n...
    99+
    2023-06-26
  • vue怎么实现页面刷新动画
    这篇“vue怎么实现页面刷新动画”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“vue怎么实现页面刷新动画”文章吧。index...
    99+
    2023-06-29
  • Vue uni-app框架实现上拉加载下拉刷新功能
    目录实现上拉加载更多优化实现下拉刷新实现上拉加载更多 打开项目根目录中的pages.json配置文件,为subPackages分包中的商品goods_list页面配置上拉触底的距离:...
    99+
    2024-04-02
  • Javascript如何实现下拉刷新功能
    这篇文章将为大家详细讲解有关Javascript如何实现下拉刷新功能,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。Html相关代码<!DOCTYPE ht...
    99+
    2024-04-02
  • Vue vant-ui框架实现上拉加载下拉刷新功能
    目录知识点速记基本用法下拉刷新代码实现1.页面布局2.样式3.方法下拉刷新效果: 知识点速记 基本用法 List通过loading和finished两个变量控制加载状态,当组件滚动...
    99+
    2024-04-02
  • 怎么用Flash和Ajax实现无刷新分页功能
    这篇文章主要讲解了“怎么用Flash和Ajax实现无刷新分页功能”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“怎么用Flash和Ajax实现无刷新分页功能”...
    99+
    2024-04-02
  • 怎么使用javascript停止页面刷新
    这篇文章主要介绍“怎么使用javascript停止页面刷新”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“怎么使用javascript停止页面刷新”文章能帮助大家解决问题。一、默认情况下的页面刷新当我...
    99+
    2023-07-06
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作