Heim > Web-Frontend > js-Tutorial > JavaScript—window对象使用示例_基础知识

JavaScript—window对象使用示例_基础知识

WBOY
Freigeben: 2016-05-16 17:09:59
Original
1155 Leute haben es durchsucht

window对象是JavaScript浏览器对象模型中的顶层对象,包含多个常用方法和属性:

1 打开新窗口

复制代码 代码如下:

window.open(pageURL,name,parameters)

其中:

pageURL为子窗口路径

name为子窗口句柄

parameters为窗口参数(各参数用逗号分隔)

如:
复制代码 代码如下:

window.open("http://www.cnblogs.com/zhouhb/","open",'height=100,width=400,top=0,left=0,toolbar=no,menubar=no,scrollbars=no,resizable=no,location=no,status=no');

2 打开模式窗口
复制代码 代码如下:

window.showModalDialog("http://www.cnblogs.com/zhouhb/","open","toolbars=0;width=200;height=200");

3 关闭窗口,不弹出提示框

如果网页不是通过脚本程序打开的(window.open()),调用window.close()脚本关闭窗口前,必须先将window.opener对象置为null,否则浏览器(IE7、IE8)会弹出一个确定关闭的对话框。
复制代码 代码如下:






对于关闭框架窗口
复制代码 代码如下:



4 location对象使用
复制代码 代码如下:

window.location.reload();//刷新当前页
window.location.href="http://www.cnblogs.com/zhouhb/"; //载入其他页面

5 history对象使用
复制代码 代码如下:

window.history.go(1); //前进
window.history.go(-1); //后退

6 子窗体向父窗体传值

6.1 简单方法

(1)在父窗体中打开子窗体
复制代码 代码如下:

var str=window.showModalDialog("s.html");
if(str!=null)
{
var v=document.getElementById("v");
v.value+=str;
}

(2)子窗体代码
复制代码 代码如下:

var v=document.getElementById("v");
window.parent.returnValue=v.value;

window.close();

另外,对于showModalDialog打开的窗口,也可以通过dialogArguments传值:

父窗口代码:
复制代码 代码如下:





无标题文档











子窗口代码:
复制代码 代码如下:





无标题文档











对于showModalDialog打开的窗口,也可以通过window.returnValue传值:

主窗口:
复制代码 代码如下:



(2)打开的窗口
复制代码 代码如下:



窗口练习




账户信息:

请妥善保存你的账户信息,以免发生损失

帐号:

密码:





6.2 更加详细的介绍

众所周知window.open() 函数可以用来打开一个新窗口,那么如何在子窗体中向父窗体传值呢,其实通过window.opener即可获取父窗体的引用。
如我们新建窗体FatherPage.htm:
复制代码 代码如下:





然后在ChildPage.htm中即可通过window.opener来访问父窗体中的元素:
复制代码 代码如下:





其实在打开子窗体的同时,我们也可以对子窗体的元素进行赋值,因为window.open函数同样会返回一个子窗体的引用,因此FatherPage.htm可以修改为:
复制代码 代码如下:





通过判断子窗体的引用是否为空,我们还可以控制使其只能打开一个子窗体:
复制代码 代码如下:





光这样还不够,当关闭子窗体时还必须对父窗体的child变量进行清空,否则打开子窗体后再关闭就无法再重新打开了:
复制代码 代码如下:






Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage