客户端Javascript学习笔记-----Window对象

来源：互联网发布：java生成utf8 xml文件编辑：程序博客网时间：2024/06/04 20:09

计时器

setTimeout()和setInteval()可以用来注册在指定的时间之后单次或重复调用的函数。

两个函数的返回值可以传递给clearTimeout和clearInterval（），用于取消这个函数的执行。

<!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=valueif(pos == -1) continue;var name = pairs[i].substring(0,pos);//提取namevar value = pairs[i].substring(pos+1);//提取valueargs[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创建的。

窗口中获得窗体的方法：

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;