`
teamojiao
  • 浏览: 350371 次
  • 性别: Icon_minigender_1
  • 来自: 南京
社区版块
存档分类
最新评论

js刷新页面s的各种实现

阅读更多

下面以三个页面分别命名为framedemo.html,left.html,right.html为例来具体说明如何做。

其中framedemo.html由左右两个页面组成,代码如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> frameDemo </TITLE>
</HEAD>
<frameset cols="200,*">
<frame name=top src="left.html">
<frame name=button src="right.html">
</frameset>
</HTML>

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

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

解释一下:

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

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

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

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

5.如果子页面也是个框架页面,里面还是其它的子页面,那么上面的有些方法可能不行。
top.html源代码;(页面上有七个按钮,功能都是刷新下面的框架页面)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
</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>

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

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

经我测试,只能1 和4 显示效果,别的好像不对哟
============================

附:
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>

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>

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

<body onload="opener.location.reload()"> 开窗时刷新
<body onUnload="opener.location.reload()"> 关闭时刷新

<script language="javascript">
window.opener.document.location.reload()
</script>

分享到:
评论

相关推荐

    判断页面是关闭还是刷新的js代码

    在探讨“判断页面是关闭还是刷新的js代码”这一主题时,我们首先需要理解网页生命周期中的几个关键事件:`onload`、`onunload`、`onbeforeunload`以及`onclose`。这些事件在网页加载、卸载或刷新过程中扮演着重要...

    刷新页面后让控制台的js代码继续执行

    为了方便起见,我们把Js代码放在浏览器的控制台执行,但是刷新页面后,js代码就清空了,也就无法执行。 可以用js代码实现一个不受页面刷新影响不断执行的代码,如下: 1. 必要的知识 prompt&#40;&#41; 弹出对话框,...

    C/S技术HTML中JAVASCRIPT的高级运用

    6. **前端路由**:对于单页应用(SPA),JavaScript可以实现前端路由,如使用React Router或Vue Router,使得在不刷新页面的情况下,通过URL变化实现页面的切换。 7. **异步编程**:Promise和async/await的引入,让...

    原生JS、CSS3 上拉刷新效果的实现。

    上拉刷新(Pull-to-Refresh)是现代网页和移动应用中常见的一种交互设计,它允许用户在内容列表底部向上滑动来加载更多数据。在原生JavaScript和CSS3的帮助下,我们可以轻松实现这种功能,为用户提供流畅且富有动态...

    javaScript 实现的一些小功能

    4. **AJAX异步请求**:JavaScript的XMLHttpRequest对象或更现代的Fetch API可以用于发送异步HTTP请求,实现数据的动态加载,无需刷新整个页面。例如,获取JSON数据: ```javascript fetch('...

    js禁止页面刷新与后退的方法

    以上代码展示了如何使用JavaScript来实现页面的刷新和后退禁止,以及对特定键和右键菜单的拦截。然而,需要注意的是,这些做法可能会对用户体验造成负面影响,比如限制了用户的正常浏览习惯。因此,在实际应用中,应...

    基于Node.js和JS的前后端分离实现.pdf

    Node.js和JavaScript可以解决前后端语言不一致的问题,实现无刷新的数据传输,提高用户体验。 10. 在线学习平台有什么优点?在线学习平台可以实现在线学习和实时提问辅助自学过程,满足碎片化时间和快节奏需求。

    HTML5结合JS不刷新网页单击缩放图片功能.rar

    在不刷新网页的情况下实现图片的单击缩放,为用户提供更友好的交互体验,尤其适用于相册、画廊等图片展示场景。 首先,HTML5提供了新的元素和API,使得图片处理更为方便。例如,`&lt;img&gt;`标签可以添加`srcset`属性来...

    multitabs将tab标签页点击之后被激活得url和title传送给当前激活页面

    multitabs.js,使用ajax将tab标签页点击之后被激活得url和title传送给当前激活页面 1、js全局变量:var dataurl; 2、将url地址赋值给dataurl: var absUrl = (function (url) { var a = document.createElement('a...

    VB_检测WebBrowser网页_刷新_加载_变更_关闭

    通过正确地使用这些事件,开发者能够实现对网页加载、刷新、变更和关闭的精确控制,从而提升应用程序的功能性和用户体验。在实际开发过程中,可能还需要结合其他VB特性,如错误处理、用户交互反馈等,以确保程序的...

    ASP.Net不刷新页面而动态获取远程数据.pdf

    例如,可以使用setInterval函数来实现每隔5秒自动刷新页面。 knowledge point 5: ASP.NET服务端数据读取过程 在服务器端,获得传来的页面地址及参数,在页面初始化时解释这些参数,根据它们来指派任务(向数据库...

    论文研究-基于AJAX的Web无刷新页面快速更新数据方法.pdf

    AJAX(Asynchronous JavaScript and XML)是一种在无需重新加载整个网页的情况下,能够更新部分网页的...论文提出了基于AJAX的Web无刷新页面快速更新数据的方法,并通过实例展示了该方法在实际Web应用中的应用与实践。

    uni-app:mescroll-nui下拉刷新组件

    本知识点主要聚焦于uni-app中的mescroll-nui下拉刷新组件,这是一个非常实用的功能,用于实现用户在滚动到页面顶部时触发数据的刷新。 首先,mescroll-nui是基于MeScroll库的一个uni-app插件,MeScroll是一个高性能...

    javascript无刷新

    “无刷新”技术主要依赖于Ajax(Asynchronous JavaScript and XML)或者现代的Fetch API、XMLHttpRequest等技术来实现。这些技术允许浏览器在后台与服务器异步交换数据,而无需重新加载整个页面。 #### 三、案例...

    js禁止页面刷新禁止用F5键刷新禁止右键的示例代码.docx

    首先,禁止用户通过F5键刷新页面。这是通过监听`document`对象的`onkeydown`事件来完成的。当用户按下键盘上的F5键时,其对应的keyCode是116。因此,我们可以在事件处理函数中检查event.keyCode是否等于116,如果是...

    页面常用的JS脚本小结

    JavaScript,简称JS,是网页开发中不可或缺的一部分,主要用于实现页面的动态效果和交互性。这里我们来详细探讨一下"页面常用的JS脚本"这一主题,以及如何利用它们提升用户体验。 1. **DOM操作**:JavaScript通过...

    JS.rar__s_2htm_javascript_js_js代码

    3. **AJAX**:异步JavaScript和XML(现在更广泛地支持JSON)技术用于在不刷新整个页面的情况下与服务器交换数据并更新部分网页内容。这在实现广告的加载和更新时非常有用,可以提供无缝的用户体验。 4. **动画效果*...

    js+数组实现网页上显示时间 星期几的实用方法.docx

    JS 实现网页上显示时间 星期几的实用方法 本文将为大家介绍如何使用 JS 和数组实现网页上显示时间 星期几的实用方法。该方法可以帮助开发者快速实现网页上的时间显示功能。 JS 日期对象 在 JavaScript 中,日期...

    js禁止页面刷新禁止用F5键刷新禁止右键的示例代码

    在网页制作中,有时需要限制用户对页面的操作,如禁止页面刷新、禁止使用F5键刷新页面以及禁止使用鼠标右键。这样的需求多出现在防止内容被轻易复制、分享,或者确保用户体验顺畅不受干扰等特殊场景。本文提供了一段...

    ssh2实现无刷新分页

    请求参数包括当前页码,服务器返回分页后的数据,然后通过JavaScript动态更新页面内容,实现无刷新效果。 6. **数据加载**:当Ajax请求成功返回数据后,前端JavaScript需要解析返回的结果,并替换或添加到页面相应...

Global site tag (gtag.js) - Google Analytics