javaScript学习(4)框架学习
javaScript学习4
1.框架
在一个普通HTML文档载入浏览器的同时还创建了一个模型,这个模型始于一个window对象和它包含的文档。单框架窗口和文档很很简单,window下就是document。如果框架文档载入浏览器时就会建立一个稍微不同一样的层次模型。
<html>
<frameset cols="50%,50%">
<frameset name="leftFrame" src="js_06.html"></frameset>
<frameset name="rightFrame" src="js_05.html"></frameset>
</frameset>
</html>
1.1 父到子的引用
父窗口中包含两个或多个框架,就是说父窗口包含子框架对象的一个数组。可以通过数组语法或者框架名定位一个框架,框架名可以用<frame>
标记中的name
属性来进行设置。
[window.]frames[n].objFuncVarName
[window.]frames["frameName"].objFuncVarName
[window.]frameName.objFuncVarName
1.2 子到父的引用
从子框架的角度来看,它的上一层称为parent(父层),因为从子框架到父层的元素的引用很简单parent.objFuncVarName
1.3 子到子的引用
任何窗口或者框架都拥有parent属性,引用必须使用parent属性来跳出当前框架,并转到所有子框架的公有框架中,以上例子中的LeftFrame
到RightFrame
可以用parent,这样和父到子引用是一样的
parent.frames[n].objFuncVarName
获得载入框架的document
对象,由于浏览器的不同调用不同,IE4+和Safari使用与窗口相同,而MOzilla浏览器更严格遵循W3C DOM标准,使用comentDocument属性
var docObj;
var frameObj=document.getElementById("myFrame");
if(frameObj.contentDocument){
docObj=frameObj.contentDocument;
}else{
docObj=frameObj.document;
}
1.4 多窗口引用
window.open()
方法返回window对象引用创建了一个新窗口并与它通信。
每个window对象都有一个opener的属性,该属性包含窗口和框架的引用,这些窗口或者框架存放一些脚本,脚本的window.open()
语句生成子窗口。
我们可以这样编程
js_9.html
代码如下:
<html>
<head>
<title>js_9</title>
<script type="text/javascript">
function newSubWindows(){
window.open("js_10.html","sub","height=200,width200");
}
</script>
</head>
<body>
<form>
<input type="button" name="" value="create clone" onclick="newSubWindows()">
<p>there is word from subwindows</p>
<input type="text" name="">
</form>
</body>
</html>
js_10.html
代码如下
<html>
<head>
<title>js_10</title>
<script type="text/javascript">
</script>
</head>
<body>
<form>
<input name="second" type="text" onchange=" opener.document.forms[0].entry.value=this.value">
</form>
</body>
</html>
点击js_9
的create clone,会弹出一个新窗口,在新窗口js_10中输入字符,js_9的输入框会跟着做相应的变化
javaScript学习(4)框架学习的更多相关文章
- JavaScript的运动框架学习总结
一.目录 1. 入门案例——实现匀速运动 2. 入门案例——实现缓冲运动 3. 实现任意值的运动框架v.1 4. 改进任意值的运动框架v.2 5. 改进任意值的运动框架v.3 6. 实现链式运动框架 ...
- Javascript之pixi框架学习
pixi 创建渲染器(renderer) 创建一个可以播放动画的区域,相当于(canvas). var renderer = PIXI.autoDetectRenderer(512, 512); do ...
- ABP入门系列(1)——学习Abp框架之实操演练
作为.Net工地搬砖长工一名,一直致力于挖坑(Bug)填坑(Debug),但技术却不见长进.也曾热情于新技术的学习,憧憬过成为技术大拿.从前端到后端,从bootstrap到javascript,从py ...
- 2013 最新的 play web framework 版本 1.2.3 框架学习文档整理
Play framework框架学习文档 Play framework框架学习文档 1 一.什么是Playframework 3 二.playframework框架的优点 4 三.Play Frame ...
- Yii框架学习 新手教程(一)
本人小菜鸟一仅仅,为了自我学习和交流PHP(jquery,linux,lamp,shell,javascript,server)等一系列的知识,小菜鸟创建了一个群.希望光临本博客的人能够进来交流.寻求 ...
- JQuery EasyUI框架学习
前言 新项目的开发前端技术打算採用EasyUI框架(基于EasyUI较为丰富的UI组件库),项目组长将前端EasyUI这块的任务分配给了我.在进行开发之前,须要我这菜鸟对EasyUI框架进行一些基础的 ...
- TypeScript基本知识(为学习AngularJS2框架做个小铺垫)
学习angularjs2框架,需要了解一些TypeScript知识点,基本了解下面这几个知识点学习AngularJS2 就够用了 1.TypeScript 1.1显示类型的定义 TypeScript类 ...
- 学习测试框架Mocha
学习测试框架Mocha 注意:是参考阮老师的文章来学的.虽然阮老师有讲解,但是觉得自己敲一遍,然后记录一遍效果会更好点.俗话说,好记性不如烂笔头. Mocha 是javascript测试框架之一,可以 ...
- 《零基础学JavaScript(全彩版)》学习笔记
<零基础学JavaScript(全彩版)>学习笔记 二〇一九年二月九日星期六0时9分 前期: 刚刚学完<零基础学HTML5+CSS3(全彩版)>,准备开始学习JavaScrip ...
- jQuery框架学习第十一天:实战jQuery表单验证及jQuery自动完成提示插件
jQuery框架学习第一天:开始认识jQueryjQuery框架学习第二天:jQuery中万能的选择器jQuery框架学习第三天:如何管理jQuery包装集 jQuery框架学习第四天:使用jQuer ...
随机推荐
- redhat yum替换成CentOS yum 并修改源
wget http://mirrors.163.com/centos/6/os/x86_64/Packages/python-iniparse-0.3.1-2.1.el6.noarch.rpm wge ...
- dbrd 8.4.6 源代码编译安装
---------------------------- 0.系统环境 ---------------------------- db01 192.168.50.10 /dev/sdb1 主节点 db ...
- CWidgetMgr---H
/************************************************************************/ //管理部件 //部件自动根据Z顺序调整消息的优先 ...
- 处理图片(updated)
高像素的图片,比如分辨率为 7712x4352 的照片,当加载到一个 bitmap 中时会占用相当大的内存. 每个像素会占用 4个字节的内存,所以当没有被压缩时,全部的图片会占用 12800万字节(约 ...
- jquery 取第一个兄弟节点
1.HTML <table> <tr> <td>1</td> <td>abc</td> <td>def</td ...
- ibatis中in语句参数传入方法
第一种:传入参数仅有数组,iterate中不能有数组的属性名 <select id="GetEmailList_Test" resultClass=" ...
- 用Zend OPCache提高PHP的性能
Zend OPCache的前身是Zend Optimizer + (Zend O+),在PHP5.5的发行版本中自带了Zend O+,并重新命名为:Zend OPCache.但是默认是没有启用的,可以 ...
- 数论 + 扩展欧几里得 - SGU 106. The equation
The equation Problem's Link Mean: 给你7个数,a,b,c,x1,x2,y1,y2.求满足a*x+b*y=-c的解x满足x1<=x<=x2,y满足y1< ...
- 004Maven_Pom.xml文档的介绍
很重要的一个文档,具体介绍如下:
- 001Maven_基本介绍及安装
Maven入门教程 介绍.环境配置 Maven介绍 Maven是一个采用纯Java编写的开源项目管理工具, Maven采用了一种被称之为Project Object Model (POM)概念来管理项 ...