可能你也碰到过这种情况,就是在js的代码中用了window.onload后,可能会影响到body中的onload事件。你可以全写在body中，也可以全放到window.onload中，但是这样并不是很方便，有时我们需要两个同时用到。这时就要用window.attachEvent和window.addEventListener来解决一下。
打开一个新窗口，该子窗口调用父对象的方法或变量，这个问题一直没有搞清楚。网上找了些资料，总结一下：
打开新窗口一般有几种方法，window.open(…),window.showModalDialog(…)，以及iframe中嵌套页面这里也一起研究吧，另外还有window.navigate(…)、window.location.href="…"、window.history.back(-1);都是实现同意页面内容跳转的，这里不讨论。
1、open子窗口：用window.opener代表父窗口的window对象
2、模态子窗口：间接通过传window对象到子窗口，然后子窗口可获得父窗口的window对象
3、iframe中子页面：用window.parent代表父窗口的window对象
父页面：1.htm 代码:
<html><head><title>打开父子窗口传值研究-父窗口</title> <script>var parValue="现在显示了父窗口中的变量值"; function test(){alert("现在显示了父窗口中的方法正常执行");}</script></head><body ><input type="button" id="mybutton1" value="打开open新窗口" onclick="window.open('2.htm');"><input type="button" id="mybutton2" value="打开modal窗口" onclick="window.showModalDialog('3.htm',window);" ><br><iframe id="subiframe" name="subiframe" src="4.htm" scrolling="auto" frameborder="1" ></iframe></body></html>
2.htm 代码：
<html><head><title>打开父子窗口传值研究-open打开子窗口</title><script>var buttonValue=window.opener.document.getElementById("mybutton2").value //获取父窗口中的对象 var parentValue=window.opener.parValue; //获取父窗口中的变量 function doParTest(){ window.opener.test(); //调用父窗口中的方法 }</script></head><body> <input type="button" value="open打开子窗口按钮" onclick="alert('buttonValue:'+buttonValue);alert('parentValue:'+parentValue);doParTest()"> </body></html>
3.htm 代码：
<html><head><title>打开父子窗口传值研究-打开modal子窗口</title><script>var parentWin=window.dialogArguments;var buttonValue=parentWin.document.getElementById("mybutton2").value; //获取父窗口中的对象 var parentValue=parentWin.parValue;//获取父窗口中的变量 function doParTest(){ parentWin.test(); //调用父窗口中的方法 }</script></head> <body bgcolor="#FFFFFF" text="#000000"> <input type="button" value="modal子窗口按钮" onclick="alert('buttonValue:'+buttonValue);alert ('parentValue:'+parentValue);parentWin.test();"></body></html>
4.htm 代码：
<html><head><title>打开父子窗口传值研究-iframe中子窗口</title><script>var buttonValue=window.parent.document.getElementById("mybutton2").value //获取父窗口中的对象 var parentValue=window.parent.parValue;//获取父窗口中的变量 function doParTest(){ window.parent.test(); //调用父窗口中的方法 }</script></head><body> <input type="button" value="iframe中子窗口按钮" onclick="alert('buttonValue:'+buttonValue);alert('parentValue:'+parentValue);doParTest()"> </body></html>
var f=(function(){…})()
例如这样的代码，阿福在写js的时候经常会用。
这个东西其实有点像AS的类的概念，把一整个函数当成一个引类return出去。
简而言之，闭包的作用就是在a执行完并返回后，闭包使得Javascript的垃圾回收机制GC不会收回a所占用的资源，因为a的内部函数b的执行需要依赖a中的变量。这是对闭包作用的非常直白的描述，不专业也不严谨，但大概意思就是这样，理解闭包需要循序渐进的过程。
1、作为一个函数变量的一个引用 – 当函数返回时，其处于激活状态。
2、一个闭包就是当一个函数返回时，一个没有释放资源的栈区。
通过作用域可以将相关的和具有依赖性的代码组织起来，以便将意外交互的风险降到最低。它不会暴露在全局命名空间中，而且无论什么时候调用依赖它的函数都不需要重新创建这个数组。
1）由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄露。解决方法是，在退出函数之前，将不使用的局部变量全部删除。
2）闭包会在父函数外部，改变父函数内部变量的值。所以，如果你把父函数当作对象（object）使用，把闭包当作它的公用方法（Public Method），把内部变量当作它的私有属性（private value），这时一定要小心，不要随便改变父函数内部变量的值。
sayAlert = function(){ alert(text); }
对象的命名属性可以通过为该命名属性赋值来创建，或重新赋值。即，对于：
var objectRef = new Object(); //创建一个普通的 JavaScript 对象
可以通过下面语句来创建名为 “testNumber” 的属性：
objectRef.testNumber = 5; /* - 或- */ objectRef[”testNumber”] = 5;
在赋值之前，对象中没有“testNumber” 属性，但在赋值后，则创建一个属性。之后的任何赋值语句都不需要再创建这个属性，而只会重新设置它的值：
objectRef.testNumber = 8; /* - or:- */ objectRef[”testNumber”] = 8;
当读取对象的属性值时，原型对象的作用便体现出来。如果对象的原型中包含属性访问器（property accessor）所使用的属性名，那么该属性的值就会返回：
/* 为命名属性赋值。如果在赋值前对象没有相应的属性，那么赋值后就会得到一个：*/ objectRef.testNumber = 8; /* 从属性中读取值 */ var val = objectRef.testNumber; /* 现在， - val - 中保存着刚赋给对象命名属性的值 8*/
而且，由于所有对象都有原型，而原型本身也是对象，所以原型也可能有原型，这样就构成了所谓的原型链。原型链终止于链中原型为 null 的对象。Object 构造函数的默认原型就有一个 null 原型，因此：
var objectRef = new Object(); //创建一个普通的 JavaScript 对象
创建了一个原型为 Object.prototype 的对象，而该原型自身则拥有一个值为 null 的原型。也就是说， objectRef 的原型链中只包含一个对象－－ Object.prototype。但对于下面的代码而言：
/* 创建 - MyObject1 - 类型对象的函数*/ function MyObject1(formalParameter){ /* 给创建的对象添加一个名为 - testNumber - 的属性 并将传递给构造函数的第一个参数指定为该属性的值：*/ this.testNumber = formalParameter; } /* 创建 - MyObject2 - 类型对象的函数*/ function MyObject2(formalParameter){ /* 给创建的对象添加一个名为 - testString - 的属性 并将传递给构造函数的第一个参数指定为该属性的值：*/ this.testString = formalParameter; }/* 接下来的操作用 MyObject1 类的实例替换了所有与 MyObject2 类的实例相关联的原型。而且，为 MyObject1 构造函数传递了参数 - 8 - ，因而其 - testNumber - 属性被赋予该值：*/ MyObject2.prototype = new MyObject1( 8 ); /* 最后，将一个字符串作为构造函数的第一个参数，创建一个 - MyObject2 - 的实例，并将指向该对象的引用赋给变量 - objectRef – ：*/ var objectRef = new MyObject2(“String_Value”);
被变量 objectRef 所引用的 MyObject2 的实例拥有一个原型链。该链中的第一个对象是在创建后被指定给 MyObject2 构造函数的 prototype 属性的 MyObject1 的一个实例。MyObject1 的实例也有一个原型，即与 Object.prototype 所引用的对象对应的默认的 Object 对象的原型。最后， Object.prototype 有一个值为 null 的原型，因此这条原型链到此结束。
当某个属性访问器尝试读取由 objectRef 所引用的对象的属性值时，整个原型链都会被搜索。在下面这种简单的情况下：
var val = objectRef.testString;
因为 objectRef 所引用的 MyObject2 的实例有一个名为“testString”的属性，因此被设置为“String_Value”的该属性的值被赋给了变量 val。但是：
var val = objectRef.testNumber;
则不能从 MyObject2 实例自身中读取到相应的命名属性值，因为该实例没有这个属性。然而，变量 val 的值仍然被设置为 8，而不是未定义－－这是因为在该实例中查找相应的命名属性失败后，解释程序会继续检查其原型对象。而该实例的原型对象是 MyObject1 的实例，这个实例有一个名为“testNumber”的属性并且值为 8，所以这个属性访问器最后会取得值 8。而且，虽然 MyObject1 和 MyObject2 都没有定义 toString 方法，但是当属性访问器通过 objectRef 读取 toString 属性的值时：
var val = objectRef.toString;
变量 val 也会被赋予一个函数的引用。这个函数就是在 Object.prototype 的 toString 属性中所保存的函数。之所以会返回这个函数，是因为发生了搜索 objectRef 原型链的过程。当在作为对象的 objectRef 中发现没有“toString”属性存在时，会搜索其原型对象，而当原型对象中不存在该属性时，则会继续搜索原型的原型。而原型链中最终的原型是 Object.prototype，这个对象确实有一个 toString 方法，因此该方法的引用被返回。
最后：
var val = objectRef.madeUpProperty;
返回 undefined，因为在搜索原型链的过程中，直至 Object.prototype 的原型－－null，都没有找到任何对象有名为“madeUpPeoperty”的属性，因此最终返回 undefined。
不论是在对象或对象的原型中，读取命名属性值的时候只返回首先找到的属性值。而当为对象的命名属性赋值时，如果对象自身不存在该属性则创建相应的属性。
这意味着，如果执行像 objectRef.testNumber = 3 这样一条赋值语句，那么这个 MyObject2 的实例自身也会创建一个名为“testNumber”的属性，而之后任何读取该命名属性的尝试都将获得相同的新值。这时候，属性访问器不会再进一步搜索原型链，但 MyObject1 实例值为 8 的“testNumber”属性并没有被修改。给 objectRef 对象的赋值只是遮挡了其原型链中相应的属性。
最近在网上查阅了不少Javascript闭包(closure)相关的资料，写的大多是非常的学术和专业。对于初学者来说别说理解闭包了，就连文字叙述都很难看懂。撰写此文的目的就是用最通俗的文字揭开Javascript闭包的真实面目。
“官方”的解释是：闭包是一个拥有许多变量和绑定了这些变量的环境的表达式（通常是一个函数），因而这些变量也是该表达式的一部分。
相信很少有人能直接看懂这句话，因为他描述的太学术。其实这句话通俗的来说就是：JavaScript中所有的function都是一个闭包。不过一般来说，嵌套的function所产生的闭包更为强大，也是大部分时候我们所谓的“闭包”。看下面这段代码：
function a() { var i = 0; function b() { alert(++i); } return b; } var c = a(); c();
这段代码有两个特点：
引用关系如图：
这样在执行完var c=a()后，变量c实际上是指向了函数b，b中用到了变量i，再执行c()后就会弹出一个窗口显示i的值(第一次为1)。这段代码其实就创建了一个闭包，为什么？因为函数a外的变量c引用了函数a内的函数b，就是说：
当函数a的内部函数b被函数a外的一个变量引用的时候，就创建了一个我们通常所谓的“闭包”。
让我们说的更透彻一些。所谓“闭包”，就是在构造函数体内定义另外的函数作为目标对象的方法函数，而这个对象的方法函数反过来引用外层外层函数体中的临时变量。这使得只要目标 对象在生存期内始终能保持其方法，就能间接保持原构造函数体当时用到的临时变量值。尽管最开始的构造函数调用已经结束，临时变量的名称也都消失了，但在目 标对象的方法内却始终能引用到该变量的值，而且该值只能通这种方法来访问。即使再次调用相同的构造函数，但只会生成新对象和方法，新的临时变量只是对应新 的值，和上次那次调用的是各自独立的。
为了更深刻的理解闭包，下面让我们继续探索闭包的作用和效果。
简而言之，闭包的作用就是在a执行完并返回后，闭包使得Javascript的垃圾回收机制GC不会收回a所占用的资源，因为a的内部函数b的执行需要依赖a中的变量。这是对闭包作用的非常直白的描述，不专业也不严谨，但大概意思就是这样，理解闭包需要循序渐进的过程。
在上面的例子中，由于闭包的存在使得函数a返回后，a中的i始终存在，这样每次执行c()，i都是自加1后alert出i的值。
那么我们来想象另一种情况，如果a返回的不是函数b，情况就完全不同了。因为a执行完后，b没有被返回给a的外界，只是被a所引用，而此时a也只会被b引用，因此函数a和b互相引用但又不被外界打扰(被外界引用)，函数a和b就会被GC回收。(关于Javascript的垃圾回收机制将在后面详细介绍)
如果要更加深入的了解闭包以及函数a和嵌套函数b的关系，我们需要引入另外几个概念：函数的执行环境(excution context)、活动对象(call object)、作用域(scope)、作用域链(scope chain)。以函数a从定义到执行的过程为例阐述这几个概念。
到此，整个函数a从定义到执行的步骤就完成了。此时a返回函数b的引用给c，又函数b的作用域链包含了对函数a的活动对象的引用，也就是说b可以访问到a中定义的所有变量和函数。函数b被c引用，函数b又依赖函数a，因此函数a在返回后不会被GC回收。
当函数b执行的时候亦会像以上步骤一样。因此，执行时b的作用域链包含了3个对象：b的活动对象、a的活动对象和window对象，如下图所示：
如图所示，当在函数b中访问一个变量的时候，搜索顺序是：
小结，本段中提到了两个重要的词语：函数的定义与执行。文中提到函数的作用域是在定义函数时候就已经确定，而不是在执行的时候确定（参看步骤1和3）。用一段代码来说明这个问题：
function f(x) { var g = function () { return x; } return g; } var h = f(1); alert(h());
这段代码中变量h指向了f中的那个匿名函数(由g返回)。
如果第一种假设成立，那输出值就是undefined；如果第二种假设成立，输出值则为1。
运行结果证明了第2个假设是正确的，说明函数的作用域确实是在定义这个函数的时候就已经确定了。
私有属性和方法在Constructor外是无法被访问的
function Constructor(...) { var that = this; var membername = value; function membername(...) {...} }
以上3点是闭包最基本的应用场景，很多经典案例都源于此。
在Javascript中，如果一个对象不再被引用，那么这个对象就会被GC回收。如果两个对象互相引用，而不再被第3者所引用，那么这两个互相引用的对象也会被回收。因为函数a被b引用，b又被a外的c引用，这就是为什么函数a执行后不会被回收的原因。
理解JavaScript的闭包是迈向高级JS程序员的必经之路，理解了其解释和运行机制才能写出更为安全和优雅的代码。如果您对本文有任何的建议和疑问，欢迎留言。
//最近碰到了很多ie和firefox的js问题，发现主要集中在ie和firefox的js结构有些不同，ie有很多默认，firefox没有，firefox需要写清路经。在网上找到这个东西，抛砖引玉。
前天接到一个任务，在向一个输入框输入时，动态从服务器获取辅助录入数据。很简单想到使用IFrame实现(当然也可以使用httpRequest，但我只是使用Notepad没有server所以选择IFrame)。
于是简单的写下如下代码：
<iframe style="display:none;" id="dataLoader" onload="getData()"></iframe>
function getData(){
var d=document.getElementById("dataLoader").document;
var data=d.getElementById("list");
//...
//以下省略
//...
}
当我使用IE时没有问题，但使用Firefox时有问题，:(.
我跟踪发现document.getElementById("dataLoader").document返回是空值。
紧接着我发现ff中document.getElementById("dataLoader")的类型是Frame，于是网上一通查，o终于找到
http://www.mozilla.org/docs/dom/domref/dom_shortTOC.html
过去我一直郁闷没有mozilla手册，现在好了，找到了。
由frame我找到
var d=document.getElementById("dataLoader").document;应改为
var d=document.getElementById("dataLoader").contentWindow.document；
contentWindow属性可以返回Frame中的window；可是MSDN中也这个属性，但不写也可以，嗨IE中可能有默认属性吧。
另外：可以使用window.frames["frameName"].document语法直接获取frame里的document对象.
iframe 父窗口和子窗口的调用方法
父窗口调用子窗口
iframe_ID.iframe_document_object.object_attribute = attribute_value;
例子:
onClick="iframe_text.myH1.innerText='http://www.33ue.cn';"
子窗口调用父窗口
parent.parent_document_object.object_attribute = attribute_value;
例子:
onclick="parent.myH1.innerText='http://www.33ue.cn';"
上面在IE下没有问题，但在firefox下不正常。在firefox下，应该是
父窗口调用子窗口
window.frames["iframe_ID"].document.getElementById("iframe_document_object"-).object_attribute = attribute_value;
例子
window.frames["iframe_text"].document.getElementById("myH1").innerHTML= "http://www.33ue.cn";
子窗口调用父窗口
parent.document.getElementById("parent_document_object").object_attribute = attribute_value;
例子
parent.document.getElementById("myH1").innerHTML = "http://www.33ue.cn";
 |