JavaScript单击网页任意位置打开新窗口以及关闭窗口的实现方法
这篇文章主要介绍了JavaScript实现单击网页任意位置打开新窗口与关闭窗口的方法,涉及javascript窗口的相关操作函数与使用技巧,需要的朋友可以参考下
本文实例讲述了JavaScript实现单击网页任意位置打开新窗口与关闭窗口的方法。分享给大家供大家参考，具体如下：
在一些不正规的网站，尤其是那些挂满广告的下载站，经常在你点击的下载链接之前，无论你点击网页的任何一处都会弹出新窗口。
这样的效果，可以轻松用JavaScript做到，还可以专门指定点击某一区域的p，才触发打开新窗口的事件。
比如下图的效果：
在原网页中，指定一个p，无论用户点击这个p的任意区域，都会打开新窗口，而点击其它地方则不会。
在新窗口的地址栏不可以编辑，不能被调整大小，提供一个“关闭”按钮，关闭该窗口。
原网页的HTML布局如下，
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
</head>
<body>
<p class="testClass" style="height:100px;border:1px solid #cccccc">点击此任意一处打开广告</p>
</body>
</html>没什么好说的，就一个class为testClass的p。
关键是以下脚本。
<script type="text/javascript">
document.onclick = function(e){//设置整个网页的单击事件
e = e || window.event;//为了兼容这样写。
var target = e.target || e.srcElement;//用来点击的对象。为了兼容这样写。
if (target.className == "testClass"){//如果点击的对象，class为testClass，那么打开新窗口。
var OpenWindow=window.open("","newwindow","height=100","width=400","top=100","left=0","toolbar=false","menubar=false","scrollbars=false","resizable=false","location=false","status=false");
//在新窗口中写入如下的HTML代码。
OpenWindow.document.write("广告<br/>");
//在Javascript中，利用window.close()可以关闭当前窗口，但不能关闭当前标签页，不过由于这个窗口是我们自己新生成的，因此对于所有浏览器有效
OpenWindow.document.write("<button onclick='javascript:window.close()'>关闭！</button>");
}
}
</script>从以上的脚本可以看到window.open()这个方法参数很长。
其中：
第一个参数为空的意思，则意为新窗口的链接不是已有的网页，新窗口的内容是通过以下的两行Javascript生成的。如果要求新窗口的内容是已有的网页，则填写相应的url。
之后的参数是如下的意思，但只是对IE有效。
newwindow：弹出窗口的名字（不是文件名），非必须，可用空''代替。
height=100：新窗口高度。
width=400：新窗口宽度。
top=0：新窗口距离当前窗口上方的像素值。
left=0：窗口距离当前窗口左侧的像素值。
toolbar=false：是否显示工具栏，menubar，scrollbars表示菜单栏和滚动栏。
resizable=false：是否允许改变窗口大小
location=false：是否启用新窗口地址栏
status=false：是否显示状态栏。
以上是JavaScript单击网页任意位置打开新窗口以及关闭窗口的实现方法的详细内容。更多信息请关注PHP中文网其他相关文章！
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
Win11的启动路径以及如何打开它
Jan 03, 2024 pm 11:13 PM
每一个Windows系统都有一个启动路径，如果你在其中添加了文件或软件，就会在开机的时候打开它。不过不少朋友不知道win11启动路径在哪里，其实我们只需要进入C盘的对应文件夹就可以了。win11启动路径：1、双击打开“此电脑”2、直接将该路径“C:\ProgramData\Microsoft\Windows\StartMenu\Programs\Startup”粘贴进路径框。3、这里就是win11启动路径了，如果我们要开机打开文件就可以将文件放进来。4、如果你根据这个路径进不来，可能是被隐藏了。
推荐：优秀JS开源人脸检测识别项目
Apr 03, 2024 am 11:55 AM
人脸检测识别技术已经是一个比较成熟且应用广泛的技术。而目前最为广泛的互联网应用语言非JS莫属，在Web前端实现人脸检测识别相比后端的人脸识别有优势也有弱势。优势包括减少网络交互、实时识别，大大缩短了用户等待时间，提高了用户体验；弱势是：受到模型大小限制，其中准确率也有限。如何在web端使用js实现人脸检测呢？为了实现Web端人脸识别，需要熟悉相关的编程语言和技术，如JavaScript、HTML、CSS、WebRTC等。同时还需要掌握相关的计算机视觉和人工智能技术。值得注意的是，由于Web端的计
星穹铁道克劳克影视乐园折纸小鸟位置
Mar 27, 2024 pm 11:51 PM
星穹铁道克劳克影视乐园总共有20只折纸小鸟，有很多玩家不知道克劳克影视乐园折纸小鸟在哪，小编已经把每只折纸小鸟位置全部都总结出来了，帮助大家进行寻找，具体内容一起来看看这篇克劳克影视乐园折纸小鸟位置最新汇总。崩坏星穹铁道攻略大全星穹铁道克劳克影视乐园折纸小鸟位置1、克劳克影视乐园一层2、克劳克影视乐园二层
了解pip安装包存储的位置和结构
Jan 18, 2024 am 08:23 AM
深入了解pip安装的包存放位置，需要具体代码示例pip是Python语言常用的包管理工具，用于方便地安装、升级和管理Python包。在使用pip安装包时，它会自动从PyPI（Python包索引）下载对应的包文件，并将其安装到指定的位置。那么，pip安装的包究竟存放在哪里呢？这是很多Python开发者都会遇到的问题。本文将深入探讨pip安装的包存放位置，并提供
win11关机位置
Jan 10, 2024 am 09:14 AM
如果我们要长时间离开电脑，那么最好将电脑关机保护它，那么win11关机在哪里呢，其实一般来说只要打开开始菜单，在其中就可以找到关机按钮了。win11关机在哪里：答：在开始菜单的电源按钮里。1、首先我们点击底部任务栏的“windows徽标”打开“开始菜单”2、打开后，可以在右下角找到“电源”按钮，如图所示。3、点击电源按钮后，就能看到“关机”了，点击它就能关机。4、如果因为死机等特殊情况无法关机，那么可以直接用电脑上的“电源键”长按强制关机。
最后纪元竞技场在哪
Mar 07, 2024 pm 08:16 PM
在《最后纪元》中，玩家可以玩多种形式，如游戏模式、挑战模式和竞技场等。竞技场则是游戏的终极玩法，提供两种模式供玩家选择。最后纪元竞技场在哪答：竞技场属于终局玩法，具体位置在冠军之门处。需要获取竞技场钥匙或记忆的竞技场钥匙，右键单击后可见世界地图，并能找到冠军之门的具体位置。竞技场分为两大模式：竞技场冠军模式和无尽竞技场模式。前者包括40波敌人与选择的奖励，总要在与竞技场冠军的较量中达到顶峰。竞技场冠军模式共有4阶段，难度越高，奖励越好。无尽竞技场是无限波次的模式，难度逐渐增加，成绩最好的挑战者将
快手发布于哪里怎么改位置？已经上传的视频怎么添加位置呢？
Mar 21, 2024 pm 06:00 PM
作为国内知名的短视频平台，快手为众多创作者提供了展示才华和分享生活的机会。在上传视频时，一些新手创作者可能会困惑于如何更改视频发布位置。本文将为您介绍快手视频发布位置的更改方法，并分享一些快手视频发布的技巧，帮助您更好地利用这个平台展示自己的作品。一、快手发布于哪里怎么改位置？1.发布界面：在快手APP中，点击“发布”按钮，进入视频发布界面。2.位置信息：在发布界面，有“位置”一栏，点击进入位置选择界面。3.更改位置：在位置选择界面，点击“定位”按钮，可以查看当前所在位置。如需更改位置，点击“位
美团天天神券位置在哪_美团天天神券位置介绍
Mar 27, 2024 pm 05:11 PM
1、我们打开手机中的美团，然后在首页点击左上角的外卖选项。2、进入外卖的平台页面之后，在首页就可以看到有天天神券的板块了，直接点击。3、进入天天神券之后，就会看到很多的活动，点击完成，然后我们完成任务就可以获得奖励了。
