js中widow.open()方法使用详解
发布网友
发布时间：2023-02-18 18:16
共1个回答
热心网友
时间：2023-09-23 06:19
一 window open()支持环境 JavaScript +/JScript +/Nav +/IE +/Opera + 二 基本语法 window open(pageURL name parameters) 其中 pageURL 为子窗口路径 name 为子窗口句柄 parameters 为窗口参数(各参数用逗号分隔) 三 示例
复制代码代码如下: <SCRIPT> <! window open ( page newwindow height= width= top= left= toolbar=no menubar=no scrollbars=no resizable=no location=no status=no ) //写成一行 > </SCRIPT>脚本运行后 page 将在新窗体newwindow中打开 宽为 高为 距屏顶 象素 屏左 象素 无工具条 无菜单条 无滚动条 不可调整大小 无地址栏 无状态栏 请对照 上例中涉及的为常用的几个参数 除此以外还有很多其他参数 请见四 四 各项参数其中yes/no也可使用 / pixel value为具体的数值 单位象素 参数 | 取值范围 | 说明 alwaysLowered | yes/no | 指定窗口隐藏在所有窗口之后 alwaysRaised | yes/no | 指定窗口悬浮在所有窗口之上 depended | yes/no | 是否和父窗口同时关闭 directories | yes/no | Nav 和 的目录栏是否可见 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 | 窗口被激活后是否浮在其它窗口之上 ===================================================== 【 最基本的弹出窗口代码】 其实代码非常简单
复制代码代码如下: <SCRIPT LANGUAGE="javascript"> <! window open ( page ) > </SCRIPT>因 为著是一段javascripts代码 所以它们应该放在<SCRIPT LANGUAGE="javascript">标签和</script>之间 <! 和 >是对一些版本低的浏览器起作用 在这些老浏览器中不会将标签中的代码作为文本显示出来 要养成这个好习惯啊 Window open ( page ) 用于控制弹出新的窗口page 如果page 不与主窗口在同一路径下 前面应写明路径 绝对路径(//)和相对路径( /)均可 用单引号和双引号都可以 只是不要混用 这一段代码可以加入HTML的任意位置 <head>和</head>之间可以 <body>间</body>也可以 越前越早执行 尤其是页面代码长 又想使页面早点弹出就尽量往前放 【 经过设置后的弹出窗口】 下面再说一说弹出窗口的设置 只要再往上面的代码中加一点东西就可以了 我们来定制这个弹出的窗口的外观 尺寸大小 弹出的位置以适应该页面的具体情况
复制代码代码如下: <SCRIPT LANGUAGE="javascript"> <! window open ( page newwindow height= width= top= left= toolbar=no menubar=no scrollbars=no resizable=no location=no status=no ) //写成一行 > </SCRIPT>参数解释 <SCRIPT LANGUAGE="javascript"> js脚本开始 window open 弹出新窗口的命令 page 弹出窗口的文件名 newwindow 弹出窗口的名字（不是文件名） 非必须 可用空 代替 height= 窗口高度 width= 窗口宽度 top= 窗口距离屏幕上方的象素值 left= 窗口距离屏幕左侧的象素值 toolbar=no 是否显示工具栏 yes为显示 menubar scrollbars 表示菜单栏和滚动栏 Resizable=no 是否允许改变窗口大小 yes为允许 location=no 是否显示地址栏 yes为允许 status=no 是否显示状态栏内的信息（通常是文件已经打开） yes为允许 </SCRIPT> js脚本结束 【 用函数控制弹出窗口】 下面是一个完整的代码
复制代码代码如下: <> <head> <script LANGUAGE="JavaScript"> <! function openwin() { window open ("page " "newwindow" "height= width= toolbar=no menubar=no scrollbars=no resizable=no location=no status=no") //写成一行 } // > </script> </head> <body onload="openwin()"> …任意的页面内容… </body> </>这里定义了一个函数openwin() 函数内容就是打开一个窗口 在调用它之前没有任何用途 怎么调用呢？ 方法一 <body onload="openwin()"> 浏览器读页面时弹出窗口 方法二 <body onunload="openwin()"> 浏览器离开页面时弹出窗口 方法三 用一个连接调用 <a href="#" _fcksaverl=""#"" _fcksaverl=""#"" _fcksaverl=""#"" onclick="openwin()">打开一个窗口</a> 注意 使用的"#"是虚连接 方法四 用一个按钮调用 <input type=button onclick="openwin()" value="打开窗口"> 【 同时弹出 个窗口】 对源代码稍微改动一下
复制代码代码如下: <script LANGUAGE="JavaScript"> <! function openwin() { window open ("page " "newwindow" "height= width= top= left= toolbar=no menubar=no scrollbars=no resizable=no location=no status=no") //写成一行 window open ("page " "newwindow " "height= width= top= left= toolbar=no menubar=no scrollbars=no resizable=no location=no status=no") //写成一行 } // > </script>为避免弹出的 个窗口覆盖 用top和left控制一下弹出的位置不要相互覆盖即可 最后用上面说过的四种方法调用即可 注意 个窗口的name(newwindows和newwindow )不要相同 或者干脆全部为空 OK？ 【 主窗口打开文件 同时弹出小窗口page 】 如下代码加入主窗口<head>区
复制代码代码如下: <script language="javascript"> <! function openwin() {window open("page " "" "width= height= ") } // > </script>加入<body>区 <a href=" " onclick="openwin()">open</a>即可 【 弹出的窗口之定时关闭控制】 下面我们再对弹出的窗口进行一些控制 效果就更好了 如果我们再将一小段代码加入弹出的页面(注意是加入到page 的HTML中 可不是主页面中 否则…) 让它 秒后自动关闭是不是更酷了？ 首先 将如下代码加入page 文件的<head>区
复制代码代码如下: <script language="JavaScript"> function closeit() {setTimeout("self close()" ) //毫秒} </script>然后 再用<body onload="closeit()"> 这一句话代替page 中原有的<BODY>这一句就可以了 (这一句话千万不要忘记写啊！这一句的作用是调用关闭窗口的代码 秒钟后就自行关闭该窗口 ) 【 在弹出窗口中加上一个关闭按钮】 <FORM> <INPUT TYPE= BUTTON VALUE= 关闭 onClick= window close() > </FORM> 呵呵 现在更加完美了！ 【 内包含的弹出窗口 一个页面两个窗口】 上面的例子都包含两个窗口 一个是主窗口 另一个是弹出的小窗口 通过下面的例子 你可以在一个页面内完成上面的效果
复制代码代码如下: <> <head> <SCRIPT LANGUAGE="JavaScript"> function openwin() {OpenWindow=window open("" "newwin" "height= width= toolbar=no scrollbars="+scroll+" menubar=no"); //写成一行 OpenWindow document write("<TITLE>例子</TITLE>") OpenWindow document write("<BODY BGCOLOR=#ffffff>") OpenWindow document write("<h >Hello!</h >") 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> </>看看 OpenWindow document write()里面的代码不就是标准的HTML吗？只要按照格式写更多的行即可 千万注意多一个标签或少一个标签就会出现错误 记得用OpenWindow document close()结束啊 【 终极应用 弹出的窗口之Cookie控制】 回 想一下 上面的弹出窗口虽然酷 但是有一点小毛病(沉浸在喜悦之中 一定没有发现吧？)比如你将上面的脚本放在一个需要频繁经过的页面里(例如首页) 那 么每次刷新这个页面 窗口都会弹出一次 是不是非常烦人？: (有解决的办法吗？Yes! ; ) Follow me 我们使用cookie来控制一下就可以了 首先 将如下代码加入主页面HTML的<HEAD>区
复制代码代码如下: <script> function openwin() {window open("page " "" "width= height= ")} function get_cookie(Name) {var search = Name + "=" var returnvalue = ""; if (document cookie length > ) { offset = document cookie indexOf(search) if (offset != ) { offset += search length end = document cookie indexOf(";" offset); if (end == ) end = document cookie length; returnvalue=unescape(document cookie substring(offset end)) } } return returnvalue; } function loadpopup(){ if (get_cookie( popped )== ){ openwin() document cookie="popped=yes" } } </script> lishixin/Article/program/Java/JSP/201311/20056