客户端Javascript学习笔记-----Window对象
计时器
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<script type="text/javascript">
/*
*定时器应用函数
*安排函数f()在未来的调用模式
*在等待了若干毫秒之后调用f()
*如果设置了interval并没有设置end参数，则对f()调用将不会停止
*如果没有设置intercal和end，只在若干毫秒后调用f()一次
*只有指定f(),，才会从start=0的时刻开始
*调用invoke()不会阻塞，会立即返回
*/
function invoke(f,start,interval,end){
if(!start) start=0;
if(arguments.length <= 2){//单次调用模式
setTimeout(f,start);//若干毫秒后的单次调用模式
}else{
setTimeout(repeat,start);//在若干毫秒后调用repeat()
function repeat(){ //在上一行所示的setTimeout()中调用
var h = setInterval(f,interval);//循环调用f
//在end毫秒后停止调用
if(end) {
setTimeout(function(){clearInterval(h);},end);
}
}
}
};
</script>
</body>
</html>
定位和导航
Window对象的location属性引用Location对象，表示该窗口中显示的文档的URL，并定义了方法来使窗口载入新的文档。
解析URL
Location对象的href属性是一个字符串，包含URL的完整文本。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
/*解析来自URL的查询串中的name=value参数对
*将name=value对存储在一个对象的属性中，并返回该对象
*
*
* var args = urlArgs();//从URL中解析参数
*
*/
function urlArgs(){
var args = {};//定义一个空对象
var query = location.search.substring(1);//查找参数串，去掉？号
var pairs = query.split("&");//根据&分组
for(var i = 0,len = pairs.length; i< len ;i++){//对于每个片段
var pos = pairs[i].indexof('=');//查找name=value
if(pos == -1) continue;
var name = pairs[i].substring(0,pos);//提取name
var value = pairs[i].substring(pos+1);//提取value
args[name] = value;//存储属性
}
return args;
};
</script>
</head>
<body>
</body>
</html>
载入新文档
Location对象的assign()方法可以使窗口载入并显示指定的URL中的文档，replace()方法类似，但它在载入新文档之前会从浏览历史中把当前文档删除。
除了assgin()和replace()方法，Location对象还定义了reload方法，可以让浏览器重新载入当前文档。
使浏览器跳转到新页面的一种更传统的方法是直接把新的URL赋给location属性：
location = "page2.html";
纯粹的片段标示符是相对URL的一种类型，它不会让浏览器载入新文档，只会使它滚动到文档的某个位置。 #top标示符是个特殊的例子，如果文档中没有元素的ID是TOP，它会让浏览器跳到文档开始处。
location = “#top”;
浏览历史
对话框
Window对象提供了3个方法向用户显示简单的对话框：
alert()向用户显示一条消息并等待用户关闭对话框。
confirm()显示一条消息，要求用户单击“确定”或“取消”按钮，并返回一个值。
<script type="text/javascript">
function disp_confirm()
{
var r=confirm("Press a button")
if (r==true)
{
document.write("You pressed OK!")
}
else
{
document.write("You pressed Cancel!")
}
}
</script>
prompt()显示一条消息，等待用户输入字符串，并返回那个字符串。
良好的设计需要有节制的使用3个弹出框，这些对话框中显示的文本是纯文本，而不是HTML格式的文本。
方法confirm()和prompt()都会产生阻塞，在用户关掉他们所显示的对话框之前，它们不会返回。在弹出一个对话框前，代码就会停止运行，如果当前正在载入文档，也会停止载入，直到用户用要求的输入进行相应为止。
更复杂的方法：
showModalDialog()显示一个包含HTML格式的“模态对话框”（显示出来就不可以点位于下面的对话框），可以给它传入参数，以及从对话框里返回值。
第一个参数用以指定提供对话框内容的HTML，第二个参数是一个任意值（数组、对象均可），这个值在对话框的脚本中可以通过window.dialogArguments属性的值访问，第三个参数是一个非标准的列表，一般配置对话框的尺寸或其他属性。
当窗口关闭后，window.returnValue属性的值就是此方法返回的值，对话框的HTML内容必须包含用来设置returnValue的“确定”按钮。
showModalDialog()或是showModelessDialog() 来调用网页对话框，至于showModalDialog()
与showModelessDialog()的区别，在于showModalDialog()打开的窗口（简称模式窗口），置在父
窗口上，必须关闭才能访问父窗口(建议尽量少用，以免招人反感)；showModelessDialog()（简称无模式窗口），
打开后不必关闭也可访问父窗口打开的窗口。
dialogHeight: iHeight 设置对话框窗口的高度。
dialogWidth: iWidth 设置对话框窗口的宽度。
dialogLeft: iXPos 设置对话框窗口相对于桌面左上角的left位置。
dialogTop: iYPos 设置对话框窗口相对于桌面左上角的top位置。
center: {yes no 1 0 } 指定是否将对话框在桌面上居中，默认值是“yes”。
help: {yes no 1 0 } 指定对话框窗口中是否显示上下文敏感的帮助图标。默认值是“yes”。
resizable: {yes no 1 0 } 指定是否对话框窗口大小可变。默认值是“no”。
status: {yes no 1 0 } 指定对话框窗口是否显示状态栏。对于非模式对话框窗口，默认值是“yes”；对于模式对话框窗口，默认值是 “no”。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<!--
这个HTML文件并不是独立的，这个文件由showDodalDialog()所调用
window.dialogArguments是一个有字符串组成的数组
数组的第一个元素将放置在对话框的顶部
剩下的每个元素是每行的输入框的标识
当单机Okay按钮的时候，返回一个数组，这个数组是由每个输入框的值组成
使用诸如这样的代码来调用：
car p = showModalDialog("弹出HTML文本的路径","传递给弹出框的参数","设置一些弹出框的属性");
-->
</head>
<body>
<form >
<fieldset id = "fields"></fieldset>//对话框的正文
<div style = "text-align:center">
<button onclick = "okay()">Okay</button>
<button onclick = "cancel()">Cancel</button>
</div>
<script type="text/javascript">
//创建对话框的主体部分，并在fieldset中显示出来
var args = window.dialogArguments; //得到传过来的参数
var text = "<legend>"+args[0]+"</legend>";
for(var i = 1,len = args.length;i<len;i++){
text += "<label>"+args[i]+": <input id = 'f"+i+"'"+"</label><br>"
}
document.getElementById(fields).innerHtml = text;
//直接关闭这个对话框，不设置返回值
function cancel(){ window.closed;};
//读取输入框的值，然后设置一个
function okay(){
window.returnValue = [];//返回一个数组
for(var i = 1,len = args.length;i < len;i++){
window.returnValue[i-1] = document.getElementById("f"+i).value;
}
window.closed;
};
</script>
</form>
</body>
</html>
多窗口和窗体
一个Web浏览器窗口可能在桌面上包含多个标签页。每个标签页都是独立的“浏览上下文”，每一个上下文都有独立的Window对象，而且相互之间互不干扰。每个标签页中运行的脚本通常不知道其他标签页的存在，更不用说和其他标签页的Window对象进行交互操作或者操作其他文档内容了。
但是窗口并不总是和其他窗口完全没有关系。一个窗口或标签页中的脚本可以打开心的窗口或标签页，当一个脚本这样做时，窗口与另一个文档之间就可以互操作。
打开和关闭窗口
使用Window对象的open()方法可以打开一个新的浏览器窗口。
open()可以有四个参数：
第一个：新窗口显示的文档的URL;
第二个：新窗口的名称;
第三个：可选参数，是一个以逗号分隔的列表，包含大小和各种属性；
第四个：只有在第二个参数命名的是一个存在的窗口时才有用，是一个布尔值，声明了由第一个参数指定的URL是应用替换掉窗口浏览历史的当前条目(true)，还是应该在窗口浏览历史中创建一个新的条目(false),后者是默认的设置。
open()方法的返回值是代表新创建的窗口的Window对象：
var w = window.open();
w.alert("whhere aer you ");
w.location = "";
使用close()将关闭一个窗口。
窗体之间的关系
任何窗口或窗体中的javascript代码都可以将自己的窗体或者窗口引用为window或self。窗体可以用parent属性引用包含它的窗口或窗体的window对象（如果一个窗口是顶级窗口或标签，而不是窗体，那么其parent属性引用的就是这个窗口本身）：
parent == self （一个窗口是顶级窗口时成立）
top属性可以获得窗体的顶级窗体（如果一个窗口是顶级窗口或标签，而不是窗体，那么其top属性引用的就是这个窗口本身）
（top：顶级 parent：上一级）
注：1.parent可以嵌套使用（parent.parent）；2.窗体是通过iframe创建的。
<iframe id="f1"/>
窗口中获得窗体的方法：
var iframeElement = document.getElementById("f1");
窗口中获得窗体的Window对象的方法（使用contentWindow）：
var childFrame = document.getElementById("f1").contentWindow;
窗口中从表示窗体的Window对象获取该窗体的<iframe>元素（使用frameElement）：
var elt = document.getElementById("f1");
var win = elt.contentWindow;
win.frameElement == elt; (true)
window.frameElement == null; (true)
常用的获得窗体Window对象的方法：
每个Window对象都有一个frames属性，它引用自身包含的窗口或窗体的子窗体。frames引用的是类数组对象，并可以通过数字或窗体名进行索引。
frames[0]：窗口的第一个子窗口。
parent.frames[1]：兄弟窗口。
frames["f1"]：名字为"f1"的子窗口。
window.f1：名字为"f1"的子窗口。
注意：frame[]数组里的元素是Window对象，而不是<iframe>元素。
交互窗口中的javascript：
假设一个web页面里有2个<iframe>，分别叫做A，B。
窗体A的脚本定义了变量i：
var i = 3;
window.i;
在B中可以访问：
parent.A.i = 4;
窗体B的脚本定义了函数f，在A中可以访问：
parent.B.f();
在A中声明变量，方便频繁调用B中的函数：
var f = parent.B.f;