- 浏览: 71042 次
- 性别:
- 来自: 大连
最近访客 更多访客>>
最新评论
-
newlangwen1:
你好 我想请教个问题,我运行了一下上面的程序,结果是输入什么就 ...
C程序 对文本行进行排序
转http://home.phpchina.com/space.php?uid=52280&do=blog&id=40791
使用JavaScript框架
在讲述 window 对象的时候,我们提到过,一个框架内的网页也是 window 对象,也就是说,Frame 对象也是 window 对象。用最容易理解的话说,每一个 HTML 文件占用一个 window 对象,包括定义框架的网页(“框架网页”)。在 IE 里用“<iframe>”标记在文档中插入的框架也是 window 对象,但是用“包含网页”的方法(在 HTML 中显示为“<!--webbot bot="include" ...-->”)读取的 HTML 就不占用独自的 window 对象。每一个框架都是包含它的页的 window 对象的一个子对象(不知道应该叫“属性”不该),要引用它,可以用以下几种方法之一:
window.frames[x]
window.frames['frameName']
window.frameName
其中,x 指的是该 window 对象中指定的第几个框架,与其它数组一样,x 也是从零开始的。frameName 指的是该框架的名字,跟<frame>里的“name”属性一样。window.frames['frameName']
window.frameName
如果使用 window.frameName 指定的 window 对象又是一个框架网页,那么引用它的框架的方法:window.frameName.subFrameName。以此类推。
要注意的时,无论在何处,引用“window”对象所返回的,都是“当前”window 对象。如果要访问其它 window 对象,就要用到 parent 和 top 属性。parent 指的是“父级”window 对象,也就是包含当前 window 对象的框架网页;top 指的是窗口最顶端的 window 对象。
使用框架还要密切留意你的 JavaScript 中定义的全局变量和自定义函数。它们都有它们的所属——所在的 window 对象。要引用其它框架中的全局变量或自定义函数,都要用“窗口对象.框架对象[.框架对象…].全局变量或自定义函数”这种很烦的方法。
以上这个问题在建立连接时经常会被忽略:如果在<head>中定义了一个默认目标窗口(<base target="...">),在<a href="javascript:...">中,要知道输入的 JavaScript 语句是在默认目标窗口中运行的,必要时加一些“parent”“top”属性。
框架编程概述
一个HTML页面可以有一个或多个子框架,这些子框架以<iframe>来标记,用来显示一个独立的HTML页面。这里所讲的框架编程包括框架的自我控制以及框架之间的互相访问,例如从一个框架中引用另一个框架中的JavaScript变量、调用其他框架内的函数、控制另一个框架中表单的行为等。
框架间的互相引用
一个页面中的所有框架以集合的形式作为window对象的属性提供,例如:window.frames就表示该页面内所有框架的集合,这和表单对象、链接对象、图片对象等是类似的,不同的是,这些集合是document的属性。因此,要引用一个子框架,可以使用如下语法:
window.frames["frameName"];
window.frames.frameName
window.frames[index]
其中,window字样也可以用self代替或省略,假设frameName为页面中第一个框架,则以下的写法是等价的:
window.frames.frameName
window.frames[index]
self.frames["frameName"]
self.frames[0]
frames[0]
frameName
每个框架都对应一个HTML页面,所以这个框架也是一个独立的浏览器窗口,它具有窗口的所有性质,所谓对框架的引用也就是对window对象的引用。有了这个window对象,就可以很方便地对其中的页面进行操作,例如使用window.document对象向页面写入数据、使用window.location属性来改变框架内的页面等。self.frames[0]
frames[0]
frameName
下面分别介绍不同层次框架间的互相引用:
1.父框架到子框架的引用
知道了上述原理,从父框架引用子框架变的非常容易,即:
window.frames["frameName"];
这样就引用了页面内名为frameName的子框架。如果要引用子框架内的子框架,根据引用的框架实际就是window对象的性质,可以这样实现:
window.frames["frameName"].frames["frameName2"];
这样就引用到了二级子框架,以此类推,可以实现多层框架的引用。2.子框架到父框架的引用
每个window对象都有一个parent属性,表示它的父框架。如果该框架已经是顶层框架,则window.parent还表示该框架本身。
3.兄弟框架间的引用
如果两个框架同为一个框架的子框架,它们称为兄弟框架,可以通过父框架来实现互相引用,例如一个页面包括2个子框架:
<frameset rows="50%,50%">
<frame src="1.html" />
<frame src="2.html" />
</frameset>
在frame1中可以使用如下语句来引用frame2:
<frame src="1.html" />
<frame src="2.html" />
</frameset>
self.parent.frames["frame2"];
4.不同层次框架间的互相引用框架的层次是针对顶层框架而言的。当层次不同时,只要知道自己所在的层次以及另一个框架所在的层次和名字,利用框架引用的window对象性质,可以很容易地实现互相访问,例如:
self.parent.frames["childName"].frames["targetFrameName"];
5.对顶层框架的引用和parent属性类似,window对象还有一个top属性。它表示对顶层框架的引用,这可以用来判断一个框架自身是否为顶层框架,例如:
//判断本框架是否为顶层框架
if(self==top){
//dosomething
}
if(self==top){
//dosomething
}
改变框架的载入页面
对框架的引用就是对window对象的引用,利用window对象的location属性,可以改变框架的导航,例如:
window.frames[0].location="1.html";
这就将页面中第一个框架的页面重定向到1.html,利用这个性质,甚至可以使用一条链接来更新多个框架。
<frameset rows="50%,50%">
<frame src="1.html" />
<frame src="2.html" />
</frameset>
<!--somecode-->
<a href="frame1.location='3.html;frame2.location='4.html'" >link</a>
<!--somecode-->
<frame src="1.html" />
<frame src="2.html" />
</frameset>
<!--somecode-->
<a href="frame1.location='3.html;frame2.location='4.html'" >link</a>
<!--somecode-->
引用其他框架内的JavaScript变量和函数
在介绍引用其他框架内JavaScript变量和函数的技术之前,先来看以下代码:
<script language="JavaScript" type="text/javascript">
<!--
function hello(){
alert("hello,ajax!");
}
window.hello();
//-->
</script>
如果运行了这段代码,会弹出“hello,ajax!”的窗口,这正是执行hello()函数的结果。那为什么hello()变成了window对象的方法呢?因为在一个页面内定义的所有全局变量和全局函数都是作为window对象的成员。例如:
<!--
function hello(){
alert("hello,ajax!");
}
window.hello();
//-->
</script>
var a=1;
alert(window.a);
就会弹出对话框显示为1。同样的原理,在不同框架之间共享变量和函数,就是要通过window对象来调用。alert(window.a);
例如:一个商品浏览页面由两个子框架组成,左侧表示商品分类的链接;当用户单击分类链接时,右侧显示相应的商品列表;用户可以单击商品旁的【购买】链接将商品加入购物车。
在这个例子中,可以利用左侧导航页面来存储用户希望购买的商品,因为当用户单击导航链接时,变化的是另外一个页面,即商品展示页面,而导航页面本身是不变的,因此其中的JavaScript变量不会丢失,可以用来存储全局数据。其实现原理如下:
假设左侧页面为link.html,右侧页面为show.html,页面结构如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> New Document </title>
</head>
<frameset cols="20%,80%">
<frame src="link.html" />
<frame src="show.html" />
</frameset>
</html>
在show.html中展示的商品旁边可以加入这样一条语句:<html>
<head>
<title> New Document </title>
</head>
<frameset cols="20%,80%">
<frame src="link.html" />
<frame src="show.html" />
</frameset>
</html>
<a href="void(0)" >加入购物车</a>
其中link表示导航框架,在link.html页面中定义了arrOrders数组来存储商品的id,函数addToOrders()用来响应商品旁边【购买】链接的单击事件,它接收的参数id表示商品的id,例子中是一个id为32068的商品:
<script language="JavaScript" type="text/javascript">
<!--
var arrOrders=new Array();
function addToOrders(id){
arrOrders.push(id);
}
//-->
</script>
这样,在结帐页面或是购物车浏览页面就可以用arrOrders来获取所有准备购买的商品。<!--
var arrOrders=new Array();
function addToOrders(id){
arrOrders.push(id);
}
//-->
</script>
框架可以使一个页面划分为功能独立的多个模块,每个模块之间彼此独立,但又可以通过window对象的引用来建立联系,是Web开发中的一个重要机制。在Ajax开发中,还可以利用隐藏框架实现各种技巧,在后面介绍Ajax实例编程时可以发现,无刷新上传文件以及解决Ajax的前进后退问题都会用到这种技术。
发表评论
-
prototype.js
2010-06-27 20:53 619http://www.cnblogs.com/thinhuna ... -
javascript 中的prototype 说明
2010-06-27 20:50 638http://myfreespace.iteye.com/bl ... -
Javascript继承机制总结
2010-06-27 20:45 884http://info.codepub.com/2007/04 ... -
JavaScript Function对象
2010-06-24 20:44 909http://book.csdn.net/bookfiles/ ... -
深入javascript function对象(二)
2010-06-24 20:41 640http://bbs.51cto.com/thread-568 ... -
深入javascript function对象(一)
2010-06-24 20:40 611http://bbs.51cto.com/thread-568 ... -
JavaScript的Function详细
2010-06-24 20:33 609Function (Built-in Object) Func ... -
Javascript 事件注册机制
2010-06-22 15:15 734http://www.360doc.com/content/0 ... -
全面剖析XMLHttpRequest对象
2010-06-21 20:29 411http://dev.yesky.com/91/2687091 ... -
投机取巧使用tomcat的一点备忘
2010-06-21 17:11 674部署的过程就是将编译后的项目copy到 webapps目录下, ... -
Javascript学习笔记之 HTML DOM Checkbox 对象
2010-06-08 20:16 960http://www.w3school.com.cn/html ... -
Javascript学习笔记之 HTML DOM opener 属性
2010-05-30 23:02 687【转】http://www.w3school.com.cn/h ... -
Javascript学习笔记之 Window 对象
2010-05-30 22:50 622【转】http://www.w3school.com.cn/ ... -
Javascript学习笔记之 用链接对用户进行重定向
2010-05-26 22:37 14362.8 用链接对用户进行重定向 可以根据用户是否打开了Ja ... -
Javascript学习笔记之 闭包
2010-05-23 21:26 587转:http://apps.hi.baidu. ... -
Javascript学习笔记之 apply和call方法
2010-05-21 21:47 704apply方法和call方法都可以将函数绑定到其他对象上执行, ... -
【转】Factory Method(createMethod)模式的javascript实现
2010-05-21 09:45 672本文来自CSDN博客http://blog.csdn.net/ ... -
Javascript学习笔记之 Javascript中的函数
2010-05-20 22:20 572Javascript中的函数在函数调用中,可以通过argume ... -
Javascript学习笔记之函数(Function)对象
2010-05-19 21:41 703【转】http://163.qizhi.blog.163.co ... -
Javascript学习笔记之全局(Global)对象
2010-05-19 20:56 671备忘全局对象的几个属性或方法 1. NaN 特殊值,表示非数 ...
相关推荐
java学习笔记大全:java内容介绍 java编程可以分成三个方向: 1、java se (j2se)桌面开发 java中的基础中的基础 2、java ee (j2ee)web开发 3、java me (j2me)手机开发 java se课程介绍 java面向对象编程(基础) java...
编程学习笔记 通过本地 Typora 编辑器,然后同步到 Github Python 系列 Python 学习笔记 Python 爬虫笔记 Python 数据分析 Python 其他模块 Python Django 移动自动化系列 Appium Airtest 前端系列 HTML CSS ...
分享第一篇,关于 NodeJS —— Javascript 的常用知识以及如何从 Javascript 开发者过渡到 NodeJS 开发者(不会介绍具体的框架)。在读本文前,希望你对 javascript 有一些初步的认识。 Javascript 是一门原型模型的...
Struts--Ejb--Hibernate--Spring--Ajax(ext,dw2)-->ssh框架 java之父gosling 1990 sun启动 绿色计划 1992 创建oak语言-->java 1994 gosling参加硅谷大会演示java功能,震惊世界 1995 sun正式发布java第一个版本,...
Android 学习笔记之 SQLite基础用法 如何充分利用 Windows Phone 高清屏幕 【cocos2d-x 手游研发----博彩大转盘】 后端架构 回顾2013:HBase的提升与挑战 memcached(十七)协议命令格式 nginx大流量负载调优 12306...
就业班时,就业老师整理的关于 Ajax的面试笔记,里边含有javaScript基础加强, Ajax编程入门,jQuery框架等一些核心资料。 核心内容概述 1.JavaScript加强,涉及到ECMAScript语法、BOM对象、DOM对象以及事件。 2....
基于企业最流行Vue实战技术,授课图文并茂,资料详实丰富,带你领略不一样的授课风格和实战技巧! 本次课程主要讲解:vue core、vue component、vue router、vue cli 以及 vue x 等全家桶技术栈!...
所有笔记内容如下: 1、JavaSE:Java入门.pdf 2、JavaSE:基础语法.pdf 3、JavaSE:流程控制.pdf 4、JavaSE:方法.pdf 5、JavaSE:数组.pdf 6、JavaSE:面向对象.pdf 7、JavaSE:异常机制.pdf 8、JavaSE:...
在前端开发的学习和实践过程中,以下是一些重要的笔记内容: HTML(超文本标记语言): HTML是构建Web页面的基础,它描述了页面的结构和内容。笔记应包括常见的HTML标签、元素嵌套规则以及语义化的重要性。 CSS...
项目标题:2021年Java SSM框架实战案例:基于jQuery的数据库全操作源码实现...简而言之,本项目提供了一个基于SSM框架和jQuery的完整数据库操作实战案例,涵盖了Web开发的多个关键环节,适合作为学习或参考的实战资源。
JavaScript工作原理 前端必知的HTTP知识 前端缓存机制 前端跨域 前端安全 前端模块化 前端工程化:工具、框架、流程、构建、部署、性能、监控 函数式编程 [设计模式]:MVC/MVVM/MVP 前端开发工具 构建工具 webpack ...
{2.8}框架中移动的小球}{59}{section.2.8} {2.9}抽象与接口}{59}{section.2.9} {2.10}访问控制}{60}{section.2.10} {2.10.1}类的属性}{60}{subsection.2.10.1} {2.10.2}类的方法}{61}{subsection.2.10.2} {...
Javascript自诞生以来,曾经没有人拿它当做一门编程语言。在Web 1.0时代,这种脚本语言主要被用来做表单验证和网页特效。直到Web 2.0时代,前端工程师利用它大大提升了网页上的用户体验,JS才被广泛重视起来。在JS...
前端:可以使用HTML、CSS和JavaScript进行页面设计和交互,也可以使用前端框架如React或Vue进行开发。部署:可以将项目部署在本地服务器或云服务器上,如阿里云、腾讯云等。通过这个项目,你将学会如何使用Spring ...
价值一万八的中美 IT 培训笔记一万多培训费的资料,北京权威的.NET培训机构】 【认真学习后你一定能成为优秀的.net程序员】 学习对象:1.大专及大专以上理工科学历,或有相当学历的理工科教育背景 2.热爱...
C# 基本语法、面向对象的思想、数据结构和算法以及设计模式(120课时) 详细介绍.Net Framework、C# 基本语法、编程规范和编程技巧、面向对象的认识问题和分析问题的思想、以及数据结构和常用算法,学习单件模式、...
C# 基本语法、面向对象的思想、数据结构和算法以及设计模式(120课时) 详细介绍.Net Framework、C# 基本语法、编程规范和编程技巧、面向对象的认识问题和分析问题的思想、以及数据结构和常用算法,学习单件模式、...
2020年Java基础教程(全资料+笔记+源码): 2020年javaweb全套教程: Mysql: Oracle: JDBC: C3P0: 前端技术 HTML、CSS、Javascript: jQuery-: Ajax: Vue: 微信小程序: 动态网页: 编程强化 JVM优化: 数据...
编程学习之路 待续(学习至 web 开发处)hot~~使用 Spring Boot + Thymeleaf 搭建 Community 提问社区new~~Java 学习路线泛型多线程正则表达式JavaWebHTML & CSS codeJavaScriptJQuery codeServlet数据库...
教学理念:编程技术的学习重在理解,关键在动手操作。教师扣扣号:836482796,可联系老师获取课堂笔记和随堂案例.也可以加群:805845584,参与学习讨论和课题答疑! ?JavaScript是由浏览器的解释器解释执行的程序语言,是...