`

html框架的刷新技术

    博客分类:
  • Html
阅读更多

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

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

以下是引用片段:

Code:
  1. <!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.0Transitional//EN">
  2. <HTML>
  3. <HEAD>
  4. <TITLE>frameDemo</TITLE>
  5. </HEAD> 
  6. <framesetrows="50%,50%">
  7. <framename=topsrc="top.html">
  8. <framename=buttonsrc="button.html">
  9. </frameset>
  10. </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源代码;(页面上有七个按钮,功能都是刷新下面的框架页面)

以下是引用片段:

Code:
  1. <!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.0Transitional//EN">
  2. <HTML>
  3. <HEAD>
  4. </HEAD>
  5. <BODY>
  6. <inputtypeinputtype=buttonvalue="刷新1"onclick="window.parent.frames[1].location.reload()"><br>
  7. <inputtypeinputtype=buttonvalue="刷新2"onclick="window.parent.frames.bottom.location.reload()"><br>
  8. <inputtypeinputtype=buttonvalue="刷新3"onclick="window.parent.frames['bottom'].location.reload()"><br>
  9. <inputtypeinputtype=buttonvalue="刷新4"onclick="window.parent.frames.item(1).location.reload()"><br>
  10. <inputtypeinputtype=buttonvalue="刷新5"onclick="window.parent.frames.item('bottom').location.reload()">br>
  11. <inputtypeinputtype=buttonvalue="刷新6"onclick="window.parent.bottom.location.reload()"><br>
  12. <inputtypeinputtype=buttonvalue="刷新7"onclick="window.parent['bottom'].location.reload()"><br>
  13. </BODY>
  14. </HTML>

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

以下是引用片段:

Code:
  1. <!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.0Transitional//EN">
  2. <HTML>
  3. <HEAD>
  4. </HEAD>
  5. <BODYonloadBODYonload="alert('我被加载了!')">
  6. <h1>Thisisthecontentinbutton.html.</h1>
  7. </BODY>
  8. </HTML>

转自:http://blog.163.com/fjs_fang/blog/static/44818481200893011247402/

分享到:
评论

相关推荐

    JS当前页面和框架自动刷新的方法

    对于框架结构的网页,利用`window.parent`和`frames`属性可以精确控制每个框架内的页面刷新,而通用的页面刷新技术则适用于更广泛的场景。在实际应用中,理解这些方法的原理和限制,有助于提高Web应用程序的用户体验...

    框架自动刷新

    总之,"框架自动刷新"是一种提高网页交互性的技术,通过合理的JavaScript编程和API利用,可以实现子框架内容的动态更新和重定向,提升用户体验。在实际项目中,需要考虑性能优化、安全性和可扩展性等因素,确保功能...

    无刷新音乐播放组件 html框架集结构

    "无刷新音乐播放组件 html框架集结构"的主题恰好解决了这个问题。它利用HTML技术,尤其是框架集(Frameset)的概念,实现了用户在浏览网页时背景音乐不间断播放的功能。 HTML框架集是一种将浏览器窗口划分为多个...

    ajaxAnyWhere局部刷新框架

    在Web开发中,局部刷新技术能够显著提升用户体验,因为它允许页面的某些部分在不重新加载整个页面的情况下进行更新。这极大地提高了交互速度,减少了网络流量,并使界面更加动态和响应式。 **一、Ajax技术基础** ...

    html 后台框架 html后台框架

    2. **前端路由**:现代框架如Angular、React和Vue.js提供了前端路由功能,允许用户在不刷新整个页面的情况下导航到不同的URL,这极大地优化了用户体验。 3. **数据绑定**:HTML后台框架通常支持双向数据绑定,使得...

    页面四种局部刷新技术.txt

    在IT领域,页面局部刷新是前端开发中一个重要的技术点,尤其在提高用户体验、减少服务器负担方面具有显著作用。从给定的文件标题、描述、标签以及部分内容来看,主要涉及了四种页面局部刷新的技术,包括iframe、...

    html左右侧框架源码

    右侧内容区域则根据用户在左侧菜单的选择进行动态填充,这可以通过AJAX(异步JavaScript和XML)技术实现,无需刷新整个页面即可加载新的内容。如果页面内容复杂,可能会采用模态对话框、折叠面板等组件来优化用户...

    html框架集js刷新页面方法大全.pdf

    当我们需要在HTML框架中刷新页面时,JavaScript提供了多种方法。这里我们将深入探讨如何在HTML框架集中利用JavaScript来刷新页面,以及一些常见的刷新页面的方法。 首先,让我们看一个简单的例子。这个例子涉及三个...

    SSH框架使用json,js,无刷新技术案例(含jar包和案例)

    SSH框架使用json,js,无刷新技术案例 ,方便正在研究这个的一些朋友 PARTNO.bind("blur",function(){ //ajax后台验证--PARTNO是否存在 //var path = ${pageContext.request.contextPath}; $.ajax({ ...

    html 后台框架代码

    这些框架通过AJAX(异步JavaScript和XML)技术与服务器进行通信,实现页面的动态更新,无需刷新整个页面。 二、常见HTML后台框架 1. Angular:由Google维护的前端框架,支持双向数据绑定,提供了强大的依赖注入...

    html--4.框架标签

    在HTML(超文本标记语言)中,框架标签是用于创建多窗口或部分页面布局的工具,这使得网页设计师可以将一个HTML文档分为多个独立显示的区域。这些标签主要用于实现更复杂的网页设计,允许同时加载和展示不同的网页...

    html框架 xml作业第一次

    HTML框架和XML是Web开发中的两个重要组成部分,它们在构建网页和数据管理方面发挥着关键作用。本作业将探讨这两个技术的基本概念、用途以及它们之间的交互。 HTML(HyperText Markup Language)是用于创建网页的...

    dwr框架实现无刷新分页

    **DWR(Direct Web Remoting)框架实现无刷新分页技术详解** DWR(Direct Web Remoting)是一种JavaScript和Java之间的远程调用技术,它允许Web应用在不刷新整个页面的情况下与服务器进行交互,从而实现动态更新和...

    HTML框架的优点与缺点.doc

    由于上述缺点,现代网页设计趋势更倾向于使用CSS Grid和Flexbox等技术来替代传统的HTML框架,以实现更加灵活、高效且符合标准的网页布局。尽管如此,在某些特定场景下,例如对历史遗留系统进行维护时,了解HTML框架...

    js控制框架刷新

    尽管如此,了解如何使用JavaScript控制框架刷新仍然对于维护旧系统或理解网页技术发展史是重要的。以下是对标题和描述中提供的知识点的详细介绍: 1. JavaScript与框架刷新: JavaScript是一种运行在客户端浏览器中...

    HTML框架Frame

    HTML框架(Frame)是网页设计中一种特殊的技术,它允许开发者将一个网页分割为多个独立的区域,每个区域可以加载不同的HTML文档,从而实现多页面同时显示在一个浏览器窗口的效果。这种技术在早期的Web开发中较为常见...

    四种局部刷新技术

    这里我们将深入探讨四种常见的局部刷新技术:iframe、JavaScript、callback以及Ajax。 首先,**iframe(内联框架)**是最早的局部刷新手段之一。通过在HTML文档中嵌入一个或多个iframe元素,每个iframe可以加载不同...

    无刷新上传技术

    在Java环境中,实现无刷新上传技术通常会结合前端的JavaScript框架,如jQuery或Vue.js,以及后端的Servlet或Spring MVC等服务器端技术。下面我们将深入探讨这一技术的关键组成部分和实现步骤: 1. **前端交互**:...

    页面自动刷新有关各种的技术

    页面自动刷新技术是一种常见的网页设计技巧,用于定期更新页面内容,提供给用户实时的信息或保持页面状态的同步。以下是对几种主要的页面刷新方法的详细解释: 1. **`&lt;meta&gt;`标签刷新**: 使用`&lt;meta&gt;`标签可以...

Global site tag (gtag.js) - Google Analytics