[javascript学习指南]JavaScript窗口操作window.open()常用方法详解

更新时间:2018-04-10    来源:浏览器    手机版     字体:

【www.bbyears.com--浏览器】

在HTML中打开窗口

我们已经知道如何在HTML中打开一个窗口。多数当前流行的浏览器中, 你可用一个href语句打开一个新窗口,例如:

点击

 代码如下 这里

即可打开另一个窗口.

说明:上述代码,目标链接打开的窗口是上面名为”yer_new_window” 的窗口。

简单温习href目标后,下面将学习如何在JavaScript中打开窗口

在JavaScript中打开窗口

在HTML中打开窗口存在一些缺陷:你左右不了其窗口的大小及式样。但JavaScript给了你这种控制权。

JavaScript中打开窗口的语法是:

 代码如下

window.open("URL","name","features");

参数说明:
  
<script LANGUAGE="javascript"> js脚本开始;
  window.open 弹出新窗口的命令;
  "page.html" 弹出窗口的文件名;
  "newwindow" 弹出窗口的名字(不是文件名),非必须,可用空""代替;
  height=100 窗口高度;
  width=400 窗口宽度;
  top=0 窗口距离屏幕上方的象素值;
  left=0 窗口距离屏幕左侧的象素值;
  toolbar=no 是否显示工具栏,yes为显示;
  menubar,scrollbars 表示菜单栏和滚动栏。
  resizable=no 是否允许改变窗口大小,yes为允许;
  location=no 是否显示地址栏,yes为允许;
  status=no 是否显示状态栏内的信息(通常是文件已经打开),yes为允许;
</script>

第一个参数 URL,实际使用时,可能是这样的 “http://shop34219081.taobao.com”
第二个参数 name,窗口的名字,如果你打开窗口时已有一个同名窗口打开,那么URL将把open语句送到原先已打开的窗口。
第三个参数 features,该参数可选,它表示窗口所具有的不同特征,具体参阅“Windows特性”

来看实例1:

 代码如下

Here"s a window named javascript_1.

来看实例2:

 代码如下

Here"s a window named javascript_1.

这两个小实例将会在两个窗口中打开两个页面,且两个窗口名分别为javascript_1,javascript_1,如果又有一实例是这样的:

 代码如下

Here"s a window named javascript_1.

那么你就将一个名为window_3.html的页面放置到了第一个窗口中。

学习点

 代码如下

window.open(”URL”,”name”,”features”)

注意:请不要混淆方法 Window.open() 与方法 Document.open(),这两者的功能完全不同。为了使您的代码清楚明白,请使用 Window.open(),而不要使用 open()

 代码如下 window.open(“URL”,”name”,”features”)

 属于Window 对象的方法,详情请见w3school中文网的HTML DOM教程
JavaScript DOM

你要是了解 HTML DOM,就不会对JavaScript DOM难于理解,关于HTML DOM ,详情请见w3school中文网的HTML DOM教程

在JavaScript 中缺省的窗口对象为 window,如何获取缺省窗口的属性呢?

 代码如下

var the_status = window.status;

这是说:找到称为window 的status属性,将之调用到变量the_status中。窗口的status特性包含了状态条上出现的词句。你也可事先设置它,像这样:

 代码如下

window.status = "I"m monkeying around!";

窗口间的交流
有时候我们同时打开了两个窗口,并且需要将另一个窗口移到前台。为了使用javascript实现窗口之间的交流,需要对该窗口施加一个引用。

 代码如下

var new_window = window.open("hello.html","html_name", "width=200,height=200");

该语句打开一个小窗口并将其赋值给变量new_window作为对该窗口的引用。

你可以象对窗口调用方法那样对new_window调用方法。

 new_window.blur();

现在我们看看将新窗口移到前台或移到后台的两个链接:

 代码如下

seover=new_window.focus(); href="#">Bring
it forward
Put it
backward

将上面的代码连起来,完整的就是这样的:

 代码如下

[html][head][title]Getting and using a window reference[/title]

[script language="JavaScript"]

</script>

A new window has been opened and moved to the background.


 
Bring it forward
Put it backward
[/body][/html]


框架 Frames
其实,框架也是窗口的一个特性,主要是用来实现分隔窗口。

其它的一些方法

注:

 代码如下

//关闭,父窗口弹出对话框,子窗口直接关闭
this.Response.Write("<script language=javascript>window.close();</script>");

//关闭,父窗口和子窗口都不弹出对话框,直接关闭
this.Response.Write("<script>");
this.Response.Write("{top.opener =null;top.close();}");
this.Response.Write("</script>");

//弹出窗口刷新当前页面width=200 height=200菜单。菜单栏,工具条,地址栏,状态栏全没有
this.Response.Write("<script language=javascript>window.open("rows.aspx","newwindow","width=200,height=200")</script>");

//弹出窗口刷新当前页面
this.Response.Write("<script language=javascript>window.open("rows.aspx")</script>");
this.Response.Write("<script>window.open("WebForm2.aspx","_blank");</script>");

//弹出提示窗口跳到webform2.aspx页(在一个IE窗口中)
this.Response.Write(" <script language=javascript>alert("注册成功");window.window.location.href="WebForm2.aspx";</script> ");

//关闭当前子窗口,刷新父窗口
this.Response.Write("<script>window.opener.location.href=window.opener.location.href;window.close();</script>");
this.Response.Write("<script>window.opener.location.replace(window.opener.document.referrer);window.close();</script>");

//子窗口刷新父窗口
this.Response.Write("<script>window.opener.location.href=window.opener.location.href;</script>");
this.Response.Write("<script>window.opener.location.href="WebForm1.aspx";</script>");

//弹出提示窗口.确定后弹出子窗口(WebForm2.aspx)
this.Response.Write("<script language="javascript">alert("发表成功!");window.open("WebForm2.aspx")</script>");

//弹出提示窗口,确定后,刷新父窗口
this.Response.Write("<script>alert("发表成功!");window.opener.location.href=window.opener.location.href;</script>");

//弹出相同的一页

//
Response.Write("parent.mainFrameBottom.location.href="yourwebform.aspx?temp=" +str+"";");

本文来源:http://www.bbyears.com/bangongshuma/40572.html

猜你感兴趣

热门标签

更多>>

本类排行