知识大全 js中widow.open()方法使用详解

Posted 知

篇首语：吾生也有涯,而知也无涯。本文由小常识网(cha138.com)小编为大家整理，主要介绍了知识大全 js中widow.open()方法使用详解相关的知识，希望对你有一定的参考价值。

本文为大家详细介绍下js中widow open()方法的各项参数及使用示例 有想学习的朋友可不要错过了 希望对大家有所帮助  

　　一 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="#" _fcksavedurl=""#"" _fcksavedurl=""#"" _fcksavedurl=""#"" 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> cha138/Article/program/Java/JSP/201311/20056

相关参考

知识大全 js文件缓存之版本管理详解

　　近几个月来的工作是一个交易系统持续改进项目迭代发布周期大约为~周最近一次迭代是V版在礼拜三完成发布不幸的是第二天上午就被老大逮过去原来老大从生产中揪出了一个bug大致的问题如下　　系统中有一个常用

知识大全 JS文本框默认值处理详解

JS文本框默认值处理详解  以下文字资料是由(全榜网网www.cha138.com)小编为大家搜集整理后发布的内容，让我们赶快一起来看一下吧！以下代码是对JS文本框的默认

知识大全 js replace 与replaceall实例用法详解

这篇文章介绍了jsreplace与replaceall实例用法详解有需要的朋友可以参考一下 　　stringObjreplace(rgExpreplaceText)参数stringObj必选

知识大全 js中的前绑定和后绑定详解

这篇文章详细介绍了js中的前绑定和后绑定有需要的朋友可以参考一下 　　其主要意思就是看我有没有用过前绑定即Dom树中的某些元素在还没有创建出来时就指定该类型的元素一出生就应该拥有的某些事件在

知识大全 JavaScript中的关键字VAR使用详解 分享

JavaScript中的关键字VAR使用详解分享  以下文字资料是由(全榜网网www.cha138.com)小编为大家搜集整理后发布的内容，让我们赶快一起来看一下吧！JS

知识大全 在js文件中如何获取basePath处理js路径问题

在js文件中如何获取basePath处理js路径问题  以下文字资料是由(全榜网网www.cha138.com)小编为大家搜集整理后发布的内容，让我们赶快一起来看一下吧！

知识大全 JS刷新框架中的其他页面 && JS刷新窗口方法汇总

JS刷新框架中的其他页面&&JS刷新窗口方法汇总  以下文字资料是由(全榜网网www.cha138.com)小编为大家搜集整理后发布的内容，让我们赶快一起来看一下吧！　　

知识大全 js中方法重载如何实现

js中没有办法直接实现方法重载但每一个函数都有一个特殊的参数arguments利用它可以实现方法的重载具体示例如下 　　都知道在js中没有办法直接实现方法重载因为在js中如果定义了多个名称相

知识大全 js中parseInt函数浅谈

js中parseInt函数浅谈  以下文字资料是由(全榜网网www.cha138.com)小编为大家搜集整理后发布的内容，让我们赶快一起来看一下吧！这篇文章介绍了Js中的

知识大全 在js中function()是什么意思

在js中function()是什么意思？一般是什么情况下用？新手求大神详细解释谢谢！function()是JS函数，类似于java中的方法，C中的函数<inputtype="button"onc