JavaScript网页精华：弹出窗口与自定义设置

79 浏览量更新于2024-08-30 收藏 107KB PDF 举报

网页JavaScript精华代码集是编程爱好者和Web开发人员必备的参考资料，它提供了关于在网页中使用JavaScript实现动态功能的实用代码片段。本文档主要关注如何使用JavaScript来创建和管理弹出窗口，这是前端交互设计中的常见需求。首先，我们来看【1、普通的弹出窗口】部分。通过`window.open()`函数，开发者可以轻松地在用户点击某个按钮或链接时打开一个新的浏览器窗口。例如： ```javascript <SCRIPT LANGUAGE="javascript"> window.open('page.html'); </SCRIPT> ``` 这个代码会在用户当前页面打开一个名为`page.html`的新窗口。``是为了避免代码被旧版浏览器当作文本显示，它们在某些情况下会起到注释的作用。虽然单引号和双引号都能用来定义字符串，但这里推荐使用单引号，以保持代码的一致性。接着是【2、经过设置后的弹出窗口】，这里的代码更详细地配置了新窗口的属性。通过传递参数，开发者可以指定窗口的高度、宽度、位置以及是否显示工具栏、菜单栏、滚动条等元素。以下是一个例子： ```javascript <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> ``` 这些参数对于用户体验和窗口管理非常重要，比如`location=no`隐藏了地址栏，`status=no`则隐藏了状态栏的信息。最后，【3、用函数控制弹出窗口】展示了如何封装弹出窗口的功能，将其封装到一个名为`openwin()`的函数中，这样代码更加模块化和易于维护。在HTML头部添加JavaScript函数，如： ```html <head> <script> 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> ``` 然后只需在需要的地方调用这个函数，即可在点击某个元素时触发弹出窗口的行为。总结来说，网页JavaScript精华代码集涵盖了基础的窗口操作技巧，如简单弹出、定制窗口属性和使用函数封装功能。这对于理解JavaScript在Web开发中的实际应用，提升网页交互体验至关重要。掌握这些代码片段有助于开发人员更高效地构建响应式和用户友好的网页应用。

网页网页javascript精华代码集精华代码集

网页javascript精华代码集

【1、普通的弹出窗口】

<!--

window.open ('page.html')

-->

</SCRIPT>

是对一些版本低的浏览器起作用，在这些老浏览器中不会将标签中的代码作为文本显示

出来。用单引号和双引号都可以，只是不要混用。

【2、经过设置后的弹出窗口】

<!--

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>

<!--

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>

</html>

　　这里定义了一个函数openwin(),怎么调用呢？

　　方法一：<body onload=openwin()> 浏览器读页面时弹出窗口；

　　方法二：<body onunload=openwin()> 浏览器离开页面时弹出窗口；

　　方法三：用链接调用：方法四：用按钮调用：

下载后可阅读完整内容，剩余9页未读，立即下载

weixin_38576561

粉丝: 4
资源: 903

JavaScript网页精华：弹出窗口与自定义设置

网页javascript 精华代码集.doc

JavaScript精华代码2（图片集）

如何优化 JavaScript 代码性能

Grunt 实现 JavaScript 静态代码检查

Selenium执行JavaScript代码

利用Selenium执行JavaScript代码

构建可维护的 JavaScript ES5 代码的技巧

如何爬取网页中javascript代码里的内容

javascript网页设计代码

javascript网页设计作业代码

最新资源