window对象

来源:互联网 发布:分布式系统 知乎 编辑:程序博客网 时间:2024/04/26 07:48

1.在使用JavaScript打开窗口或者关闭窗口的时候都要使用window对象,而且如果做一些比较特殊的效果也会使用到window对象,但是由于其本身是一个对象,所以可以直接应用里面的各种操作方法。

2.opener表示的是操作子窗口的对象。

3.window对象是专门负责窗口操作的对象。

4.使用window对象可以完成打开一个新窗口,打开确认框等常见操作,通常是在父窗口中打开子窗口。

示例代码:

(1)

<html>
<head>
    <title>www.baidu.com</title>
    <script language="javascript">
    function fun(thisurl){
    window.open(thisurl,"页面标题","width=470,height=150,scrollbars=yes,resizeable=no");
    if(window.confirm("确认删除?")){
          alert("您选择的“是”!");
}else{
          alert("您选择的“否”!");
}
}
</script>
</head>
<body onload="fun('hello.htm')">
          <form action="" method="post" name="myform">
网址:<SELECT name="url" onChange="fun(this.value)">
           <OPTION VALUE="hello_1.htm">hello_1</OPTION>
           <OPTION VALUE="hello_2.htm">hello_2</OPTION>
           </SELECT>
</form>
<a href="#" onclick="fun()">删除邮件</a>
网站:<SELECT name="url" onChange="fun(this.value)">
           <OPTION VALUE="#">== 请选择要浏览的站点 ==</OPTION>
           <OPTION VALUE="http://www.mldn.cn">MLDN</OPTION>
           <OPTION VALUE="http://bbs.mldn.cn">魔乐社区BBS</OPTION>
           </SELECT>
</body>
</html>

用浏览器执行后的效果如下所示:


(2)

<html>
<head>
    <title>www.baidu.com</title>
    <script language="javascript">
    function fun(thisurl){
    window.location = thisurl;
}
</script>
</head>
<body>
网站:<SELECT name="url" onChange="fun(this.value)">
           <OPTION VALUE="#">== 请选择要浏览的站点 ==</OPTION>
           <OPTION VALUE="http://www.baidu.com">百度</OPTION>
           <OPTION VALUE="http://www.google.com">谷歌</OPTION>
           </SELECT>
</body>
</html>

用浏览器执行后的效果如下所示:


(3)将子窗口的结果返回给父窗口

   A.实例一

子窗口代码如下:(openerDemo.htm)

<html>
<head>
    <title>www.baidu.com</title>
<script language="javascript">
    function closeWin(){
window.close();
}
window.opener.location.reload(); //在子窗口中刷新父窗口。而且必须要先打开父窗口。
</script>
</head>
<body>
    <h1>Hello World!</h1>
<h3><a href="#" onclick="closeWin()">关闭窗口</a></h3>
</body>
</html>

父窗口的代码如下:

<html>
<head>
    <title>www.baidu.com</title>
<script language="javascript">
   function fun(thisurl){
window.open(thisurl,"页面标题","width=470,height=150,scrollbars=yes,resizeable=no");
}
</script>
</head>
<body>
<input type="button" value="打开" onClick="fun('openerDemo.htm')">
</body>
</html>

用浏览器执行此段代码(先执行父窗口,再执行子窗口)的结果如下:(点击关闭窗口,父窗口将得到刷新。)


    B.实例二

子窗口代码如下:(content.htm)

<html>
<head>
    <title>www.baidu.com</title>
<script language="javascript">
    function returnValue(thisurl){
var city = document.myform.city.value;//取出当前选择好的信息。
var doc = window.opener.document;     //取得父窗口的文档
doc.parentform.result.value = city;   //设置新内容
window.close();
     }
</script>
</head>
<body>
<form name="myform">
   选择:<select name="city">
             <option value="北京">北京</option>
<option value="上海">上海</option>
<option value="深圳">深圳</option>
<option value="广州">广州</option>
<option value="天津">天津</option>
    </select>
    <input type="button" value="返回"  onClick="returnValue()"
</form>
</body>
</html>

父窗口的代码如下:

<html>
<head>
    <title>www.baidu.com</title>
<script language="javascript">
    function shownnewpage(thisurl){
window.open(thisurl,"页面标题","width=470,height=150,scrollbars=yes,resizeable=no");
             }
</script>
</head>
<body>
<form name="parentform">
   <input type="button" value="选择信息" onclick="shownnewpage('content.htm')">
   <br>选择的结果:<input type="text" name="result">
</form>
</body>
</html>

用浏览器执行此段代码的结果如下:(在父窗口的执行结果中点击“选择信息”将弹出子窗口,选择的结果将返回到父窗口。)


0 0
原创粉丝点击