window.onload用法详解

时间: 2023-08-24 20:40:44 浏览: 152

JavaScript中window.open用法实例详解

5星 · 资源好评率100%

本文较为详细的分析了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，还可以实现更复杂的逻辑，如防止重复弹窗。

window.onload 是一个在文档加载完成后自动执行的事件，常用于在页面加载完成后执行一些 JavaScript 代码。该事件可以通过两种方式定义：一种是直接在 HTML 页面中使用 onload 属性，另一种是在 JavaScript 代码中使用 addEventListener() 方法。以下是两种方式的示例代码： HTML页面中使用 onload 属性： ```html <!DOCTYPE html> <html> <head> <title>示例</title> </head> <body onload="myFunction()"> <h1>Hello World!</h1> <script> function myFunction() { alert("页面加载完成！"); } </script> </body> </html> ``` JavaScript 代码中使用 addEventListener() 方法： ```html <!DOCTYPE html> <html> <head> <title>示例</title> </head> <body> <h1>Hello World!</h1> <script> window.addEventListener("load", function() { alert("页面加载完成！"); }); </script> </body> </html> ``` 无论使用哪种方式，都需要注意以下几点： 1. 只有当页面完全加载完成后，才会触发该事件； 2. 如果在页面加载过程中出现错误，可能会导致该事件无法触发； 3. 如果有多个 onload 事件，它们会按照定义的顺序依次执行。总之，window.onload 是一个非常常用的事件，可以帮助我们在页面加载完成后执行一些必要的 JavaScript 代码。

阅读全文

window.onload用法详解

相关推荐

window.onload

window.open参数详解.txt

vue window.onload 用法

window.open全攻略

图片懒加载imgLazyLoading.js使用详解

JavaScript中Window.open参数

window.open的参数详细应用

PHP下ajax跨域的解决方案之window.name实例分析

JQuery的ready函数与JS的onload的区别详解

FCKeditor使用方法详解.docx

javascript基础入门：元素操作与onload事件详解

JavaScript Window对象详解：方法与属性大全

Web前端开发技术-window对象.pptx

JavaScript浏览器对象之一Window对象详解

JavaScript的document对象和window对象详解

thinkPHP下ueditor的使用方法详解

实验室设备管理系统 SSM毕业设计 附带论文.zip

PPT高效插件神器推荐-最新发布.zip

数据中心机房基础设计及规划方案.pdf

最新推荐

实验室设备管理系统 SSM毕业设计 附带论文.zip

PPT高效插件神器推荐-最新发布.zip

数据中心机房基础设计及规划方案.pdf

Visio软件全套资源及教程-最新发布.zip

高清艺术文字图标资源，PNG和ICO格式免费下载

管理建模和仿真的文件

DMA技术：绕过CPU实现高效数据传输

SGM8701电压比较器如何在低功耗电池供电系统中实现高效率运作？

mui框架HTML5应用界面组件使用示例教程

"互动学习：行动中的多样性与论文攻读经历"

实验室设备管理系统 SSM毕业设计附带论文.zip

实验室设备管理系统 SSM毕业设计附带论文.zip