Javascript 解疑
1.HTML框架frameset的应用
框架编程概述一个HTML页面可以有一个或多个子框架，这些子框架以<iframe>来标记，用来显示一个独立的HTML页面。这里所讲的框架编程包括框架的自我控制以及框架之间的互相访问，例如从一个框架中引用另一个框架中的JavaScript变量、调用其他框架内的函数、控制另一个框架中表单的行为等。
框架间的互相引用：一个页面中的所有框架以集合的形式作为window对象的属性提供，例如：window.frames就表示该页面内所有框架的集合，这和表单对象、链接对象、图片对象等是类似的，不同的是，这些集合是document的属性。因此，要引用一个子框架，可以使用如下语法：
代码如下:
window.frames["frameName"];
window.frames.frameName;
window.frames[index];
其中，window字样也可以用self代替或省略，假设frameName为页面中第一个框架，则以下的写法是等价的：
self.frames["frameName"]==self.frames[0]==frames[0]
每个框架都对应一个HTML页面，所以这个框架也是一个独立的浏览器窗口，它具有窗口的所有性质，所谓对框架的引用也就是对window对象的引用。有了这个window对象，就可以很方便地对其中的页面进行操作，例如使用window.document对象向页面写入数据、使用window.location属性来改变框架内的页面等。下面分别介绍不同层次框架间的互相引用：
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" name="frame1" />
<frame src="2.html" name="frame2" />
</frameset>
在frame1中可以使用如下语句来引用frame2：
self.parent.frames["frame2"];
4) 不同层次框架间的互相引用
框架的层次是针对顶层框架而言的。当层次不同时，只要知道自己所在的层次以及另一个框架所在的层次和名字，利用框架引用的window对象性质，可以很容易地实现互相访问，例如： self.parent.frames["childName"].frames["targetFrameName"];
5) 对顶层框架的引用
和parent属性类似，window对象还有一个top属性。它表示对顶层框架的引用，这可以用来判断一个框架自身是否为顶层框架，例如：
//判断本框架是否为顶层框架
if(self==top){//dosomething }
改变框架的载入页面: 对框架的引用就是对window对象的引用，利用window对象的location属性，可以改变框架的导航，例如：
window.frames[0].location="1.html"; 这就将页面中第一个框架的页面重定向到1.html，利用这个性质，甚至可以使用一条链接来更新多个框架:
代码如下:
<frameset rows="50%,50%">
<frame src="1.html" name="frame1" />
<frame src="2.html" name="frame2" />
</frameset>
<!--somecode-->
<a href="frame1.location='3.html;frame2.location='4.html'" onclick="">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对象的成员。例如： var a=1; alert(window.a); 就会弹出对话框显示为1。同样的原理，在不同框架之间共享变量和函数，就是要通过window对象来调用。例如：
一个商品浏览页面由两个子框架组成，左侧表示商品分类的链接；当用户单击分类链接时，右侧显示相应的商品列表；用户可以单击商品旁的【购买】链接将商品加入购物车。
在这个例子中，可以利用左侧导航页面来存储用户希望购买的商品，因为当用户单击导航链接时，变化的是另外一个页面，即商品展示页面，而导航页面本身是不变的，因此其中的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" name="link" />
<frame src="show.html" name="show" />
</frameset>
</html>
在show.html中展示的商品旁边可以加入这样一条语句：
<a href="void(0)" onclick="self.parent.link.addToOrders(32068)">加入购物车</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来获取所有准备购买的商品。框架可以使一个页面划分为功能独立的多个模块，每个模块之间彼此独立，但又可以通过window对象的引用来建立联系，是Web开发中的一个重要机制。在Ajax开发中，还可以利用隐藏框架实现各种技巧，Ajax实现无刷新上传文件以及解决Ajax的前进后退问题都会用到这种技术。
2. 如何动态改变frame和iframe的尺寸大小？
改变frame尺寸：
代码如下:
//index.html
<html>
<head>
<meta name="GENERATOR" content="Microsoft FrontPage 5.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>动态改变框架大小 </title>
</head>
<FRAMESET name="full" rows="50%,50%">
<FRAME SRC="main.htm">
<FRAME SRC="main.htm">
</FRAMESET>
</html>
<HTML>
<TITLE>Form Object example</TITLE>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
function fttop() {
if (document.getElementById("yltop").value=="隐藏上部"){
document.getElementById("yltop").value="隐藏下部";
parent.full.rows="0,*";
}else{
document.getElementById("yltop").value="隐藏上部";
parent.full.rows="*,0";
}
}
function ftall()
{
parent.full.rows="50%,50%";
}
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="evalform" METHOD="get">
<input type="button" name="yltop" id="yltop" onclick="fttop();" value="隐藏上部">
<input type="button" name="ylall" id="ylall" onclick="ftall();" value="显示全部">
</FORM>
</BODY>
</HTML>
运行index.html
改变iframe尺寸：
代码如下:
<iframe id="frame1" src="1.htm" width="100px" height="100px">
</iframe>
<br>
<input type="button" value="加宽" onclick="addWidth()">
<input type="button" value="加高" onclick="addHeight()">
<script language="javascript">
function addWidth()
{
var o=document.getElementById("frame1");
o.width=eval(o.width)+10;
}
function addHeight()
{
var o=document.getElementById("frame1");
o.height=eval(o.height)+10;
}
</script>
相关推荐
-
Javascript 解疑
1.HTML框架frameset的应用 框架编程概述一个HTML页面可以有一个或多个子框架,这些子框架以<iframe>来标记,用来显示一个独立的HTML页面.这里所讲的框架编程包括框架的自我控制以及框架之间的互相访问,例如从一个框架中引用另一个框架中的JavaScript变量.调用其他框架内的函数.控制另一个框架中表单的行为等. 框架间的互相引用:一个页面中的所有框架以集合的形式作为window对象的属性提供,例如:window.frames就表示该页面内所有框架的集合,这和表单对象.链接对
-
详解JavaScript的AngularJS框架中的作用域与数据绑定
AngularJS 简介 AngularJS 是由 Google 发起的一款开源的前端 MVC 脚本框架,既适合做普通 WEB 应用也可以做 SPA(单页面应用,所有的用户操作都在一个页面中完成).与同为 MVC 框架的 Dojo 的定位不同,AngularJS 在功能上更加轻量,而相比于 jQuery,AngularJS 又帮您省去了许多机械的绑定工作.在一些对开发速度要求高,功能模块不需要太丰富的非企业级 WEB 应用上,AngularJS 是一个非常好的选择.AngularJS 最为复杂同
-
JavaScript中立即执行函数实例详解
前言 js立即执行函数可以让你的函数在创建后立即执行,js立即执行函数模式是一种语法,可以让你的函数在定义后立即被执行,这种模式本质上就是函数表达式(命名的或者匿名的),在创建后立即执行. ( function(){-} )()和( function (){-} () )是两种javascript立即执行函数的常见写法,最初我以为是一个括号包裹匿名函数,再在后面加个括号调用函数,最后达到函数定义后立即执行的目的,后来发现加括号的原因并非如此. 下面话不多说了,来一起看看详细的介绍吧. 通常我们声
-
javascript+jQuery实现360开机时间显示效果
实现效果: 实现原理: 给关闭按钮绑定点击事件,点击以后触发动画效果.利用jQuery的animate方法,先让显示天气的盒子高度变为0,接着让整个包含天气和事件的盒子宽度变为0,最后通过将display属性值设为none,使得close按钮消失. 实现代码: <!DOCTYPE html> <html> <head> <title>仿360开机效果</title> <meta charset="utf-8"> &
-
JavaScript中正则表达式的概念与应用
今天和大家分享一些关于正则表达式的知识和在javascript中的应用.正则表达式简单却又不简单,比如以前我的老师给我们讲的时候就说这个东西入门的话二三十分钟就精通了,一旦没有入门那就可几天都补不回来.于是当初就很认真的学习并研究了它.没想到正则表达式不仅代码简洁,而且在实际的操作中为前端工程师们省事了不少.总所周知,用户在浏览页面的时候,唯一和数据打交道的就是表单了,关于表单的验证,其实有很多中方法,接下来,我就会给大家分享两种,一种是普通繁琐的方法,一种是正则表达式,看看它到底能够给表单带来
-
Javascript中正则表达式的使用及基本语法
前面的话 正则表达式在人们的印象中可能是一堆无法理解的字符,但就是这些符号却实现了字符串的高效操作.通常的情况是,问题本身并不复杂,但没有正则表达式就成了大问题.javascript中的正则表达式作为相当重要的知识,本文将介绍正则表达式的基础语法 定义 正则表达式(Regular Expression)是一门简单语言的语法规范,是强大.便捷.高效的文本处理工具,它应用在一些方法中,对字符串中的信息实现查找.替换和提取操作 javascript中的正则表达式用RegExp对象表示,有两种写法:一种
-
JavaScript正则方法replace实现搜索关键字高亮显示
前言 正则表达式是字符串处理工具中强有力的工具.也有人认为这只是一个小玩具,但不管怎么说都离不开它. 这里介绍的是JavaScript的正则表达式的replace方法 ,和实现搜索关键字高亮的功能. 先介绍一下正则表达式的replace方法 replace介绍 w3school原文链接介绍 正则表达式如何使用特殊字符$来表示原来的文本,这是实现搜索高亮的关键, var str = "asad sad 123 sd qwe21"; str.replace(/\d+/img,"数
-
JavaScript实现三级级联特效
本文实例为大家分享了js实现三级级联特效的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <!-- 实现效果:选择省会出现相应的县下拉框,同时市的下拉框改变--> <script type="applicati
-
推荐一个javascript的加密工具
一个加密JAVASCRIPT的开源工具PACKER2.0.2 这是一个并非很复杂的编码工具,编码过后可以被浏览器直接识别.新浪在用.比如:http://comment4.news.sina.com.cn/comment/cmnt_xml.js 从这里进入http://dean.edwards.name/packer/,很简单的一个界面. 设置也很简单Numeric (Base 10) :所有的字符都被编码成数字Normal (Base 62) :所有的字符都被编码成字母与数字符号构成的值.这是推
-
javascript 放大镜 v1.0 基于Yui2 实现的放大镜效果
v1.0实现功能 1 放大倍数设置 2 透明度设置 3 反转特效 4 放大图片层的大小自定义 5 鼠标层的大小自定义 6 ie6下select遮盖问题 7 光标样式自定义 8 zIndex设置 简单初始化方法举例 复制代码 代码如下: new flower.init("Demo","mag"); new flower.init("Demo1","mag1",{ max:3,zoomType:false,zoomWidth:20