JavaScript中window.open用法实例详解_javascriptwindow.open资源-CSDN文库

5星 · 超过95%的资源 84 浏览量 2020-12-10 21:22:07 上传评论收藏 57KB PDF 举报

本文较为详细的分析了JavaScript中window.open用法。分享给大家供大家参考。具体如下：代码如下:[removed] 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’) //写成一行 [removed] 参数解释： js脚本开始； window.open 弹出新窗口的命令； ‘ JavaScript中的`window.open()`函数是用于在浏览器中打开新窗口或者新标签的API，它可以用于创建一个新的浏览器窗口或者替换已存在的窗口。这个函数通常在网页交互中用来打开新的链接、弹出对话框或者进行页面间的跳转。下面我们将详细探讨`window.open()`的使用方法及其相关参数。 `window.open()`的基本语法如下： ```javascript window.open(url, name, features); ``` - `url`：这是一个必需的参数，表示要打开的网页URL。 - `name`：可选参数，表示新窗口的名称。这个名字可以用于之后通过`window.name`属性访问该窗口。如果省略或者设置为空字符串，浏览器将选择一个适当的窗口，或者创建一个新的窗口。 - `features`：可选参数，表示新窗口的特性，如大小、位置、工具栏等。这个参数是一个由逗号分隔的特征字符串，每个特征以键值对的形式出现，例如`"width=400, height=600"`。以下是一些常见的特征参数： - `width`: 窗口宽度。 - `height`: 窗口高度。 - `top`: 窗口距离屏幕顶部的距离。 - `left`: 窗口距离屏幕左侧的距离。 - `toolbar`: 是否显示工具栏，`yes`表示显示，`no`表示不显示。 - `menubar`: 是否显示菜单栏，`yes`表示显示，`no`表示不显示。 - `scrollbars`: 是否显示滚动条，`yes`表示显示，`no`表示不显示。 - `resizable`: 是否允许用户调整窗口大小，`yes`表示允许，`no`表示不允许。 - `location`: 是否显示地址栏，`yes`表示显示，`no`表示不显示。 - `status`: 是否显示状态栏，`yes`表示显示，`no`表示不显示。 **用函数控制弹出窗口** 你可以定义一个函数来调用`window.open()`，并在适当的时候执行这个函数。例如，当页面加载完成时弹出窗口，或者在用户点击某个按钮时弹出窗口。下面是一个例子： ```html <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`函数会在页面加载完成后被调用，从而打开指定的窗口。 **定时关闭弹出的窗口** 如果你希望弹出的窗口在一段时间后自动关闭，可以在弹出的页面中添加JavaScript代码来实现。例如，以下代码将在10秒后关闭窗口： ```html <script language="Javascript"> function closeit() { setTimeout("self.close()", 10000); // 毫秒 } </script> <body onload="closeit()"> ... 页面内容 ... </body> </html> ``` **仅弹出一次窗口（使用Cookie控制）** 为了防止窗口重复弹出，我们可以利用Cookie来存储用户的访问状态。当用户首次访问页面时，弹出窗口并设置Cookie；之后每次访问，检查是否存在这个Cookie，如果存在则不再弹出窗口。以下是一个简单的实现： ```html <script> function openwin() { if (!get_cookie('visited')) { window.open("page.html", "", "width=200,height=200"); set_cookie('visited', 'true', 1); // 设置Cookie，有效期为1天 } } function get_cookie(name) { var search = name + "="; var returnvalue = ""; if (document.cookie.length > 0) { offset = document.cookie.indexOf(search); if (offset != -1) { offset += search.length; end = document.cookie.indexOf(";", offset); if (end == -1) end = document.cookie.length; returnvalue = unescape(document.cookie.substring(offset, end)); } } return returnvalue; } function set_cookie(name, value, days) { var expires = ""; if (days) { var date = new Date(); date.setTime(date.getTime() + days * 24 * 60 * 60 * 1000); expires = "; expires=" + date.toUTCString(); } document.cookie = name + "=" + (value || "") + expires + "; path=/"; } </script> <body onload="openwin()"> ... 页面内容 ... </body> </html> ``` 总结来说，JavaScript的`window.open()`函数是一个强大的工具，可以用于创建、控制和管理浏览器窗口。通过理解其参数和使用方式，开发者可以实现各种丰富的交互效果，提升用户体验。同时，配合其他技术如Cookie，还可以实现更复杂的逻辑，如防止重复弹窗。

资源详情

资源评论

资源推荐