- 浏览: 614173 次
- 性别:
- 来自: 卡哇伊
文章分类
- 全部博客 (299)
- C# (25)
- Java (1)
- WinForm (0)
- Asp.Net (86)
- Jsp (2)
- Php (1)
- Web Service (0)
- Desgin Patterns (19)
- Data Structure & Algorithms (1)
- SQLserver (41)
- Mysql (0)
- Oracle (2)
- Javascript (50)
- Ajax (10)
- Jquery (1)
- Flex (0)
- Regular Expression (5)
- DIV+CSS+XHTML+XML (18)
- Software Test (0)
- Linux (0)
- Utility (17)
- Net Digest (4)
- windows 2003 (10)
- Other (4)
- English (1)
- IT Term (1)
最新评论
-
w497480098h:
学习了 很好谢谢
SQL Server下无限多级别分类查询解决办法(简单查询树形结构数据库表) -
main_fun:
确实不错
iframe自适应高度 -
jveqi:
...
DBA -
mxcie:
其它版本没有确认,今天使用vs2003时,其.sln文件也需要 ...
彻底删除项目的VSS源代码管理信息 -
moneyprosper:
就只有IE支持,火狐和谷歌都不支持此种方法。正在寻找中。。。
从父页面读取和操作iframe中内容方法
一、window.open()支持环境:
JavaScript1.0+/JScript1.0+/Nav2+/IE3+/Opera3+
二、基本语法:
window.open(pageURL,name,parameters)
其中:
pageURL 为子窗口路径
name 为子窗口句柄
parameters 为窗口参数(各参数用逗号分隔)
三、示例:
<SCRIPT>
<!--
window.open ('page.html','newwindow','height=100,width=400,top=0,left=0,toolbar=no,menubar=no,scrollbars=no, resizable=no,location=no, status=no')
//写成一行
-->
</SCRIPT>
脚本运行后,page.html将在新窗体newwindow中打开,宽为100,高为400,距屏顶0象素,屏左0象素,无工具条,无菜单条,无滚动条,不可调整大小,无地址栏,无状态栏。请对照。
上例中涉及的为常用的几个参数,除此以外还有很多其他参数,请见四。
四、各项参数
其中yes/no也可使用1/0;pixel value为具体的数值,单位象素。
参数 | 取值范围 | 说明
alwaysLowered | yes/no | 指定窗口隐藏在所有窗口之后
alwaysRaised | yes/no | 指定窗口悬浮在所有窗口之上
depended | yes/no | 是否和父窗口同时关闭
directories | yes/no | Nav2和3的目录栏是否可见
height | pixel value | 窗口高度
hotkeys | yes/no | 在没菜单栏的窗口中设安全退出热键
innerHeight | pixel value | 窗口中文档的像素高度
innerWidth | pixel value | 窗口中文档的像素宽度
location | yes/no | 位置栏是否可见
menubar | yes/no | 菜单栏是否可见
outerHeight | pixel value | 设定窗口(包括装饰边框)的像素高度
outerWidth | pixel value | 设定窗口(包括装饰边框)的像素宽度
resizable | yes/no | 窗口大小是否可调整
screenX | pixel value | 窗口距屏幕左边界的像素长度
screenY | pixel value | 窗口距屏幕上边界的像素长度
scrollbars | yes/no | 窗口是否可有滚动栏
titlebar | yes/no | 窗口题目栏是否可见
toolbar | yes/no | 窗口工具栏是否可见
Width | pixel value | 窗口的像素宽度
z-look | yes/no | 窗口被激活后是否浮在其它窗口之上
=====================================================
【1、最基本的弹出窗口代码】
其实代码非常简单:<SCRIPT LANGUAGE="javascript">
<!--
window.open ('page.html')
-->
</SCRIPT>
因为着是一段javascripts代码,所以它们应该放在<SCRIPT LANGUAGE="javascript">标签和</script>之间。<!-- 和 -->是对一些版本低的浏览器起作用,在这些老浏览器中不会将标签中的代码作为文本显示出来。要养成这个好习惯啊。
Window.open ('page.html') 用于控制弹出新的窗口page.html,如果page.html不与主窗口在同一路径下,前面应写明路径,绝对路径(http://)和相对路径(../)均可。用单引号和双引号都可以,只是不要混用。
这一段代码可以加入HTML的任意位置,<head>和</head>之间可以,<body>间</body>也可以,越前越早执行,尤其是页面代码长,又想使页面早点弹出就尽量往前放。
【2、经过设置后的弹出窗口】
下面再说一说弹出窗口的设置。只要再往上面的代码中加一点东西就可以了。
我们来定制这个弹出的窗口的外观,尺寸大小,弹出的位置以适应该页面的具体情况。<SCRIPT LANGUAGE="javascript">
<!--
window.open ('page.html', 'newwindow', 'height=100, width=400, top=0,left=0, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, status=no')
//写成一行
-->
</SCRIPT>
参数解释:
<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> js脚本结束
【3、用函数控制弹出窗口】
下面是一个完整的代码。
<html>
<head>
<script LANGUAGE="JavaScript">
<!--
function openwin() { window.open ("page.html", "newwindow", "height=100, width=400, toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, status=no")
//写成一行
}
//-->
</script>
</head>
<body onload="openwin()">
…任意的页面内容…
</body>
</html>
这里定义了一个函数openwin(),函数内容就是打开一个窗口。在调用它之前没有任何用途。
怎么调用呢?
方法一:<body onload="openwin()"> 浏览器读页面时弹出窗口;
方法二:<body onunload="openwin()"> 浏览器离开页面时弹出窗口;
方法三:用一个连接调用:
<a href="#" onclick="openwin()">打开一个窗口</a>
注意:使用的"#"是虚连接。
方法四:用一个按钮调用:
<input type="button" onclick="openwin()" value="打开窗口">
【4、同时弹出2个窗口】
对源代码稍微改动一下:
<script LANGUAGE="JavaScript">
<!--
function openwin()
{ window.open ("page.html", "newwindow", "height=100, width=100, top=0,left=0,toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, status=no")
//写成一行
window.open ("page2.html", "newwindow2", "height=100, width=100, top=100, left=100,toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, status=no")
//写成一行
}
//-->
</script>
为避免弹出的2个窗口覆盖,用top和left控制一下弹出的位置不要相互覆盖即可。最后用上面说过的四种方法调用即可。
注意:2个窗口的name(newwindows和newwindow2)不要相同,或者干脆全部为空。OK?
【5、主窗口打开文件1.htm,同时弹出小窗口page.html】
如下代码加入主窗口<head>区:
<script language="javascript">
<!--
function openwin()
{window.open("page.html","","width=200,height=200")
}
//-->
</script>
加入<body>区:
<a href="1.htm" onclick="openwin()">open</a>即可。
【6、弹出的窗口之定时关闭控制】
下面我们再对弹出的窗口进行一些控制,效果就更好了。如果我们再将一小段代码加入弹出的页面(注意是加入到page.html的HTML中,可不是主页面中,否则…),让它10秒后自动关闭是不是更酷了?
首先,将如下代码加入page.html文件的<head>区:
<script language="JavaScript">
function closeit()
{setTimeout("self.close()",10000) //毫秒}
</script>
然后,再用<body onload="closeit()"> 这一句话代替page.html中原有的<BODY>这一句就可以了。(这一句话千万不要忘记写啊!这一句的作用是调用关闭窗口的代码,10秒钟后就自行关闭该窗口。)
【7、在弹出窗口中加上一个关闭按钮】<FORM>
<INPUT TYPE='BUTTON' VALUE='关闭' onClick='window.close()'>
</FORM>
呵呵,现在更加完美了!
【8、内包含的弹出窗口-一个页面两个窗口】
上面的例子都包含两个窗口,一个是主窗口,另一个是弹出的小窗口。
通过下面的例子,你可以在一个页面内完成上面的效果。<html>
<head>
<SCRIPT LANGUAGE="JavaScript">
function openwin()
{OpenWindow=window.open("", "newwin", "height=250, width=250,toolbar=no,scrollbars="+scroll+",menubar=no");
//写成一行
OpenWindow.document.write("<TITLE>例子</TITLE>")
OpenWindow.document.write("<BODY BGCOLOR=#ffffff>")
OpenWindow.document.write("<h1>Hello!</h1>")
OpenWindow.document.write("New window opened!")
OpenWindow.document.write("</BODY>")
OpenWindow.document.write("</HTML>")
OpenWindow.document.close()}
</SCRIPT>
</head>
<body>
<a href="#" onclick="openwin()">打开一个窗口</a>
<input type="button" onclick="openwin()" value="打开窗口">
</body>
</html>
看看 OpenWindow.document.write()里面的代码不就是标准的HTML吗?只要按照格式写更多的行即可。千万注意多一个标签或少一个标签就会出现错误。记得用OpenWindow.document.close()结束啊。
【9、终极应用--弹出的窗口之Cookie控制】
回想一下,上面的弹出窗口虽然酷,但是有一点小毛病(沉浸在喜悦之中,一定没有发现吧?)比如你将上面的脚本放在一个需要频繁经过的页面里(例如首页),那么每次刷新这个页面,窗口都会弹出一次,是不是非常烦人
我们使用cookie来控制一下就可以了。
首先,将如下代码加入主页面HTML的<HEAD>区:
<script type="text/javascript"> function winopen(){ window.open("aa.html","","width=300,height=300"); } function getCookie(key){//传入key值,通过key取查找value var search=key+"="; var returnValue=""; if(document.cookie.length>0){ var offset=document.cookie.indexOf(search); if(offset!=-1){ offset+=search.length; } var end=document.cookie.indexOf(";",offset); if(end==-1){ end=document.cookie.length; }//由于asp的cookie是经过url编码的,所以读之前要unescape一下。 returnValue=unescape(document.cookie.substring(offset,end)); } return returnValue; } function loadpupop(){ if(getCookie("popped")==''){ winopen(); document.cookie="pupped=yes"; } } </script>
然后,用<body onload="loadpopup()">(注意不是openwin而是loadpop啊!)替换主页面中原有的<BODY>这一句即可。你可以试着刷新一下这个页面或重新进入该页面,窗口再也不会弹出了。真正的Pop-Only-Once!
写到这里弹出窗口的制作和应用技巧基本上算是完成了,俺也累坏了,一口气说了这么多,希望对正在制作网页的朋友有所帮助俺就非常欣慰了。
需要注意的是,JS脚本中的的大小写最好前后保持一致。
unescape函数解释:
JavaScript unescape() 函数
定义和用法
escape()编码<--->unescape解码!
unescape() 函数可对通过 escape() 编码的字符串进行解码。
语法
unescape(string)
string | 必需。要解码或反转义的字符串。 |
返回值
string 被解码后的一个副本。
说明
该函数的工作原理是这样的:通过找到形式为 %xx 和 %uxxxx 的字符序列(x 表示十六进制的数字),用 Unicode 字符 \u00xx 和 \uxxxx 替换这样的字符序列进行解码。
提示和注释
注释:ECMAScript v3 已从标准中删除了 unescape() 函数,并反对使用它,因此应该用 decodeURI() 和 decodeURIComponent() 取而代之。
实例
在本例中,我们将使用 escape() 来编码字符串,然后使用 unescape() 对其解码:
<script type="text/javascript"> var test1="Visit W3School!" test1=escape(test1) document.write (test1 + "<br />") test1=unescape(test1) document.write(test1 + "<br />") </script>
输出:
Visit%20W3School%21 Visit W3School!
【10、关闭弹出窗口时候刷新父窗体】引用下面的JS方法,实现关闭弹出窗口刷新父窗体,因为是window.open方式打开的所以不需要指定:opener=null;否则需要指定opener=null;才不会提示你是否关闭窗口.
javascript:opener.location.href=opener.location.href;window.close();
无提示关闭页面:
this.Response.Write("<script>");
this.Response.Write("{top.opener =null;top.close();}");
this.Response.Write("</script>");
_blank方式打开和_self方式打开,_blank新的页面,_self自身页面打开window.open的第二个参数可以是target,也可以指定名称,指定名称不能重复,否则会在同一个页面中打开,除target方式(也就是:_blank,_self等)外;
this.Response.Write("<script>window.open('WebForm2.aspx','_blank');</script>");
this.Response.Write("<script>window.open('WebForm2.aspx','_self);</script>");
//弹出提示窗口跳到webform2.aspx页(在一个IE窗口中)
this.Response.Write(" <script language=javascript>alert('注册成功');window.location.href='WebForm2.aspx';</script> ");
//在框架中指定name为mainFrameBottom的frame的转向页面,并传入参数.
Response.Write("<script>parent.mainFrameBottom.location.href='yourwebform.aspx?temp=" +str+"';</script>");
这个是引用文档的url地址, 比如说在http://www.aaaa.com/1.htm上有个链接指向http://www.bbbb.com,当点击http://www.aaaa.com/1.htm上那个链接转到http://www.bbbb.com时,对http://www.bbbb.com来说referrer就是http://www.aaaa.com/1.htm (document.referrer:当前网页从哪里链接来的 document.location:当前网页的地址) |
举例:
1. a.html文件内容如下:
<a href="b.html">浏览b.html </a>
2. b.html文件中的内容如下:
<body>
<script type="text/javascript">
document.write(document.referrer);
</script>
</body>
3. 则在通过a.html中的超链接访问b.html的时候,显示的结果是:
http://127.0.0.1:8180/a.html
说明:
经过测试,需要将两个文件放在服务器中才能得到想要的结果,若直接在本地文件夹中则得到空字符串,若直接在浏览器地址栏中输入b.html的URL地址或使用打开菜单访问或者使用window.open打开b.html,则document.referrer的值为空字符串。
本文来自: 脚本之家(www.jb51.net) 详细出处参考:http://www.jb51.net/article/17966.htm
发表评论
-
简单选项卡制作方式
2009-10-26 15:16 1035<!DOCTYPE html PUBLIC " ... -
字体放大效果,字体[大][中][小]
2009-10-20 16:12 1094<!DOCTYPE html PUBLIC " ... -
JS中保留两位小数
2009-10-19 11:22 3244//这里使用字符串的"123.0000" ... -
JS中String,Date,Math常用函数
2009-10-11 18:25 3720String,Date,Math常用函数 ... -
eval,confirm,alert,prompt函数
2009-10-11 12:23 1501eval()函数JavaScript有许多小窍门来使编程更加容 ... -
从零开始学习jQuery(剧场版) 你必须知道的javascript
2009-10-03 11:28 886一.摘要 本文是jQuery系列教程的剧场版, 即和jQue ... -
深入浅出JSON
2009-10-02 20:27 695JSON定义 JSON(JavaScript Objec ... -
数据类型和Json格式
2009-10-02 19:53 9161. 前几天,我才知 ... -
防止网页被嵌入框架的代码
2009-10-02 17:31 916<script type="text/java ... -
学习javascrip闭包 (closure)
2009-10-02 16:53 882闭包(closure)是Javascript语言的一个难点 ... -
花点时间搞清top、postop、scrolltop、scrollHeight、offsetHeight
2009-09-30 18:41 17621. top 此属性仅仅在对象的定位(position ... -
document.write()和document.writeln()的区别
2009-09-18 11:06 8210解决思路: 两者都是JavaScript向客户端输出的方法,对 ... -
几个常用的小函数(检查是否为数字,否为电话号码,num是否是负数,检查是否为日期...)
2009-09-10 17:41 1167//函数名:chkemail//功能介绍:检查是否为Email ... -
为什么二月的天数比其他月少?
2009-09-06 09:10 1502——公元前46年,罗马皇帝恺撒在修改历法时,规定每年为12个月 ... -
iframe自适应高度
2009-09-01 23:40 3280Demo页面:主页面 iframe_a ... -
document.body和document.documentElement的区别
2009-09-01 22:25 2405document.body:是DOM中Document对象里的 ... -
从父页面读取和操作iframe中内容方法
2009-08-27 20:50 3681基本的操作方法: ... -
JsTAB选项卡示例集合(二)
2009-08-15 23:25 1825仿163的一款TAB选项卡,有的人也称它为网页标签。本标签用到 ... -
Js Tab选项卡示例集合
2009-08-15 23:22 7980清新选项卡(一个页面布局两个) 一个横排的清新选项卡, ... -
Js事件列表
2009-08-15 20:41 912js事件列表 onkeypress,onkeyd ...
相关推荐
### window.open 参数详解 在JavaScript中,`window.open()` 方法被广泛用于打开新的浏览器窗口或标签页。这对于创建弹出窗口、预览链接等场景非常有用。本文将详细介绍 `window.open()` 的各个参数及其用法。 ###...
### window.open()函数详解 在Web开发中,`window.open()`是一个非常实用的JavaScript函数,用于在新的浏览器窗口或标签页中打开一个指定的URL。它不仅能够打开新窗口,还可以控制新窗口的属性,如大小、位置以及...
### Window.open() 方法详解 #### 一、方法简介 `window.open()` 是一个在Web开发中经常被用来创建新浏览器窗口或标签页的方法。此方法是 `window` 对象的一个属性,通过调用该方法可以指定打开的新窗口的URL、...
### window.open 打开新窗口参数设置详解 在前端开发中,`window.open()` 方法是浏览器内置的一个功能,用于在JavaScript中打开新的浏览器窗口。本文将深入探讨如何使用 `window.open()` 方法及其参数设置,帮助...
一、window.open()支持环境: JavaScript1.0+/JScript1.0+/Nav2+/IE3+/Opera3+ 二、windown.open基本语法: window.open(pageURL,name,parameters) 其中: pageURL为子窗口路径name为子窗口句柄parameters为窗口参数...
### JavaScript中Window.open参数详解 #### 1. 最基本的弹出窗口代码 在Web开发中,`window.open` 方法是非常实用的一个功能,它可以用来创建一个新的浏览器窗口或标签页,并加载指定的URL。最简单的使用方式如下...
根据提供的文件信息,我们可以深入探讨`window.open()`方法在不同浏览器环境下的特性和使用细节。 ### window.open() 方法概述 `window.open()`是JavaScript中一个非常实用的方法,它用于在一个新的浏览器窗口或...
#### 六、window.open详解 **1. 功能介绍** `window.open` 是一个标准方法,用于打开一个新的浏览器窗口。它可以是模式窗口,也可以是非模式窗口。非模式窗口意味着用户可以在新窗口打开的同时继续与原窗口交互。 ...
### 使用 `window.open` 和 `window.opener` 实现网页间通信 #### 一、引言 在现代Web开发中,网页间的通信是一项常见的需求。例如,在多窗口或多个标签页的应用场景下,如何实现不同窗口间的高效数据交互,成为了...
window.open() 函数在 JavaScript 中的应用详解 window.open() 函数是 JavaScript 中一个非常重要的函数,用于打开一个新的浏览器窗口或标签页。在实际开发中,我们经常需要使用 window.open() 函数来打开新的页面...
### window.open 的参数详细应用 在网页开发过程中,`window.open` 方法被广泛应用于打开新的浏览器窗口或标签页。此方法对于实现弹出窗口、预览功能等具有重要作用。下面将详细探讨 `window.open` 方法的各项参数...
详解 JS location.href 和 window.open 的几种用法和区别 location.href 和 window.open 是 JavaScript 中两个常用的方法,用于控制浏览器的导航和窗口操作。它们的用法和区别是很多开发者需要了解和掌握的知识点。...
【Window.open()详解】 在JavaScript中,`window.open()` 是一个非常重要的方法,它用于打开一个新的浏览器窗口或者重载已有的窗口。以下是对这个方法的详细介绍: ### 1. 基本用法 最简单的`window.open()` 使用...
..实现弹11出窗口的window.open用法详解(js代码).docx
..实现弹11出窗口的window.open用法详解(js代码).pdf
关于window.open()的详细介绍使用,浏览器对于bom的不同兼容问题
### window.open方法详解 在网页开发中,`window.open` 方法是用于打开新窗口或标签页的一个非常实用的功能。此方法常被用在各种场景下,例如:弹出广告、登录框、信息提示等。 #### 方法语法 ```javascript ...
本文将详细解析这一技术的核心原理与实践步骤,帮助读者深入理解如何通过`window.open`方法在IE浏览器环境下保存网页数据。 ### 技术核心:`window.open`与`execCommand` #### `window.open`方法 `window.open`是...