网站首页 > 基础教程 正文
点击右上方红色按钮关注“小郑搞码事”,每天都能学到知识,搞懂一个问题!
大家好!我是/小郑搞码事/的小郑
今天和大家分享一下JS如何操作浏览器窗口。只讲如何打开一个新窗口
先来看效果图
上面这个图界面效果就是我们要实现的。
我们常常需要创建一个新窗口,用来向用户显示额外的信息,同时又避免他们正在阅读的信息消失。从实现方案上来看,尽管我们可以用HTML打开一个新的浏览器窗口,但是使用JavaScript可以对新窗口的内容和特性进行更多的控制。
接下来,我们看一下怎么实现的
一、定义窗口打开函数
定义一个打开新窗口的函数newWindow。如上面代码所示,变量catWindow包含一个新的窗口对象,这个对象引用图像文件icon.png,这个新窗口的名称是catWin,必须设置名称,因为我们以后可能希望在a或另一个脚本中引用这个窗口。新窗口的宽度是350像素,高度是260像素,位置是左边400,上边400。
二、写一个调用函数
页面中,包含一个onload事件处理程序,它调用newWinLinks函数,newWinLinks循环遍历页面上的a,检查是否有任何a包含class属性值newWin。如果有,就设置这个a元素的onclick事件处理程序,从而,当点击这个a时,调用newWindow函数。
总结一下
需要注意两个地方:
1、newWindow中,在宽度和高度参数中的逗号之间不能有任何空格,如果有空格,那么脚本可能在某些浏览器中无效,总地来说,当脚本出现错误,需要进行高度时,要首先查找这样的小问题。
2、比如向窗口中添加参数时,希望窗口具有工具栏,地址栏,滚动条
toolbar=yes,location=yes,scrollbars=yes
参数默认是no,可以不填。当然浏览器上表现也有不同,需要知道。
猜你喜欢
- 2024-11-14 JavaScript监听浏览器关闭及刷新事件beforeunload
- 2024-11-14 JavaScript 闭包 js中的闭包到底是什么啊
- 2024-11-14 HTML、CSS、JavaScript都能实现哪些功能?「新人必学基础」
- 2024-11-14 手把手教会你JavaScript引擎如何执行JavaScript代码
- 2024-11-14 前端 - HTML基础(1) html5前端教程
- 2024-11-14 检测元素外部点击?分享一段优质 JS 代码片段!
- 2024-11-14 web前端必会知识点:使用JQuery完成页面定时弹出广告
- 2024-11-14 快速云:JavaScript事件模型使用技巧
- 2024-11-14 Blazor Bootstrap 组件库 Toast 轻量弹窗组件介绍
- 2024-11-14 Selenium ide对弹出窗口的处理 selenium处理js弹出窗口
- 06-18单例模式谁都会,破坏单例模式听说过吗?
- 06-18Objective-c单例模式的正确写法「藏」
- 06-18单例模式介绍(单例模式都有哪些)
- 06-18前端设计-单例模式在实战中的应用技巧
- 06-18PHP之单例模式(php单例模式连接数据库)
- 06-18设计模式:单例模式及C及C++实现示例
- 06-18python的单例模式(单例 python)
- 06-18你认为最简单的单例模式,东西还挺多
- 最近发表
- 标签列表
-
- jsp (69)
- gitpush (78)
- gitreset (66)
- python字典 (67)
- dockercp (63)
- gitclone命令 (63)
- dockersave (62)
- linux命令大全 (65)
- pythonif (86)
- location.href (69)
- dockerexec (65)
- tail-f (79)
- queryselectorall (63)
- location.search (79)
- bootstrap教程 (74)
- 单例 (62)
- linuxgzip (68)
- 字符串连接 (73)
- html标签 (69)
- c++初始化列表 (64)
- mysqlinnodbmyisam区别 (63)
- arraylistadd (66)
- mysqldatesub函数 (63)
- window10java环境变量设置 (66)
- c++虚函数和纯虚函数的区别 (66)