脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → 刷新框架子页面

js刷新框架子页面的七种方法代码

 更新时间：2008年11月20日 23:17:34   作者：  
js刷新框架子页面的七种方法
面以三个页面分别命名为framedemo.html,top.html,button.html为例来具体说明如何做。
其中framedemo.html由上下两个页面组成，代码如下：
复制代码 代码如下:

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

现在假设top.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>

下面是bottom.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>
您可能感兴趣的文章:

相关文章

  • 基于JS实现移动端向左滑动出现删除按钮功能

    基于JS实现移动端向左滑动出现删除按钮功能

    最近在做移动端项目时，需要实现一个列表页面的每一项item向左滑动时出现相应的删除按钮，其实实现此功能很简单的。这篇文章主要介绍了基于js实现移动端向左滑动出现删除按钮,需要的朋友可以参考下
    2017-02-02
  • 小程序开发之云函数的使用教程详解

    小程序开发之云函数的使用教程详解

    云函数是部署在云端的函数，他和小程序本地的函数存在很大的区别。本文将通过示例详细为大家介绍如何在小程序开发中使用云函数，需要的可以参考一下
    2022-03-03
  • safari,opera嵌入iframe页面cookie读取问题解决方法

    safari,opera嵌入iframe页面cookie读取问题解决方法

    最近做的合作网站嵌入到对方的iframe中去，在safari,opera和有些版本的搜狗浏览器（内核版本原因）中不能读到cookie。
    2010-06-06
  • JS中from 表单序列化提交的代码

    JS中from 表单序列化提交的代码

    这篇文章主要介绍了javascript中from 表单序列化提交的实现方法，代码简单易懂，非常不错，需要的朋友参考下吧
    2017-01-01
  • js实现瀑布流布局(无限加载)

    js实现瀑布流布局(无限加载)

    这篇文章主要为大家详细介绍了js实现瀑布流布局，无限加载，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-03-03
  • Layui给switch添加响应事件的例子

    Layui给switch添加响应事件的例子

    今天小编就为大家分享一篇Layui给switch添加响应事件的例子，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • js瀑布流布局的实现

    js瀑布流布局的实现

    这篇文章主要为大家详细介绍了js瀑布流布局的实现，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-06-06
  • 你可能不知道的typescript实用小技巧

    你可能不知道的typescript实用小技巧

    作为前端程序员,TS已经成为一项必不可少的技能,本文旨在介绍 TS中的一些实用技巧,提高大家对这门语言更深的认知,这篇文章主要给大家介绍了关于typescript实用小技巧的相关资料,需要的朋友可以参考下
    2021-08-08
  • js Proxy的原理详解

    js Proxy的原理详解

    Proxy用于修改某些操作的默认行为，在目标对象前架设一个“拦截”层，外界对该对象的访问都必须先通过这一层拦截，因此提供了一种机制可以对外界的访问进行过滤和改写。本文就讲讲Proxy的使用
    2021-05-05
  • 原生Js页面滚动延迟加载图片实现原理及过程

    原生Js页面滚动延迟加载图片实现原理及过程

    页面滚动加载事件，获取元素在页面里的top值根据滚动条的位置判断何时显示图片；获取元素集合 加载过的图片从集合里删除，具体实现如下，感兴趣的朋友各位可以参考下哈
    2013-06-06

最新评论