JavaScript实现单击网页任意位置打开关闭窗口的代码
- 更新时间:2020-06-29 08:25:28
- 编辑:贾飞翼
参考资料
- 《边用边学Dreamweaver网页设计与制作》配套资料 配套资源 / 121.18 MB / 李彪,杨仁毅 推荐度:
- CSS3+DIV网页样式与布局从入门到精通 PDF 电子书 / 185 MB / 未来科技 推荐度:
- JavaScript高级程序设计(第4版) PDF 电子书 / 122 MB / 马特·弗里斯比(Matt Frisbie 推荐度:
- Zoom it / 128 KB / 网页 推荐度:
- JavaScript程序设计基础教程 课后答案 / 481 KB / 阮文江 推荐度:
正文内容
JavaScript实现单击网页任意位置打开新窗口与关闭窗口的方法
本文实例讲述了JavaScript实现单击网页任意位置打开新窗口与关闭窗口的方法。分享给大家供大家参考,具体如下:
在一些不正规的网站,尤其是那些挂满广告的下载站,经常在你点击的下载链接之前,无论你点击网页的任何一处都会弹出新窗口。
这样的效果,可以轻松用JavaScript做到,还可以专门指定点击某一区域的Div,才触发打开新窗口的事件。
比如下图的效果:
在原网页中,指定一个Div,无论用户点击这个Div的任意区域,都会打开新窗口,而点击其它地方则不会。
在新窗口的地址栏不可以编辑,不能被调整大小,提供一个“关闭”按钮,关闭该窗口。
原网页的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> <div class="testClass" >点击此任意一处打开广告</div> </body> </html>
没什么好说的,就一个class为testClass的Div。
关键是以下脚本。
<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程序设计有所帮助。
相关教程
-
解析javascript关于“时间”的一次探索
这篇文章主要介绍了javascript关于“时间”的一次探索,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
发布时间:2020-02-01
-
JavaScript格式化数字、金额、千分位、保留几位小数、舍入舍去的实例代码
这篇文章主要介绍了JavaScript 格式化数字、金额、千分位、保留几位小数、舍入舍去,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随
发布时间:2020-01-06
-
JavaScript 中的 JSON的知识点整理
我们先来看一个JS中常见的JS对象序列化成JSON字符串的问题,请问,以下JS对象通过JSON.stringify后的字符串是怎样的
发布时间:2020-03-26
-
JavaScript如何实现注册时密码强度校验
这篇文章主要为大家详细介绍了JavaScript注册时密码强度校验代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
发布时间:2020-03-07
-
如何处理jQuery符号$与其他javascript 库、框架冲突的问题
下面小编就为大家带来一篇完美解决jQuery符号$与其他javascript 库、框架冲突的问题。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
发布时间:2020-01-13
-
JavaScript String 对象常用实例方法
下面小编就为大家带来一篇JavaScript String 对象常用方法详解。小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
发布时间:2020-04-06
-
JavaScript中的ignoreCase属性使用方法
这篇文章主要介绍了JavaScript正则表达式中的ignoreCase属性使用详解,是JS学习进阶中的重要知识点,需要的朋友可以参考下
发布时间:2020-01-05
-
介绍javascript中递归函数的小注意
这篇文章主要针对javascript中递归函数用法注意点做介绍,有需要小伙伴可以来学习下
发布时间:2020-03-14
-
《PHP、MySQL与JavaScript学习手册》学习笔记与总结
php常用系统函数大全 字符串函数 strlen:获取字符串长度,字节长度 substr_count 某字符串出现的次数 substr:字符串截取,获取字符串(按照字节进行截取) mb_strlen mb_substr strchr:与substr相似,从指定位置截取一直到最后 strrchr(获取文件后缀名):与strchr一样,只是从右边开始查找字符 strtolower:所有的字符都小写(针对英文字母) strtoupper:所有的字符都大写 strrev:字符串反转(
发布时间:2018-10-19
-
分享JavaScript 获取元素在父节点中的下标技巧
jQuery中直接通过$(this).index()即可得到当前元素的下标。下面通过实例给大家介绍JavaScript 获取元素在父节点中的下标,需要的朋友参考下吧
发布时间:2020-02-12
-
JavaScript编程精解
JavaScript编程精解(原书第2版) 的第2版经过全面的更新和修订,覆盖了JavaScript的绝大多数语言特性,涉及Web编程和Node.js服务器编程,以及JavaScript性能优化等。《JavaScript编程精解(原书第2版)》的
大小:96.4 MBJavaScript电子书
-
你不知道的JavaScript(中卷)
JavaScript这门语言简单易用,很容易上手,但其语言机制复杂微妙,即使是经验丰富的JavaScript开发人员,如果没有认真学习的话也无法真正理解。
大小:7.8 MBJS电子书
-
大型JavaScript应用最佳实践指南
大小:35 MBJavaScript电子书
-
JavaScript基础教程
本书是经典的JavaScript入门书,以易学便查、图文并茂、循序渐进和善于用常见任务讲解语言知识而著称。书中从JavaScript语言基础开始,分别讨论了图像、框架、浏览器窗口、表单、正则表达式
大小:14 MBJS教程电子书
-
JavaScript前端开发案例教程
JavaScript是这种运用于Web前端开发的开发语言,具备简易、易懂、实用的特性,用JavaScript开发设计网页页面能够提高网页页面的参与性,为客户出示即时的、动态性的互动感受。 《 JavaScript前端
大小:75.1 MBJS前端电子书
-
21天学通HTML+CSS+JavaScript Web开发
21天学通HTML CSS JavaScript Web开发(第7版) 是全球畅销书《21天学通使用HTML与CSS发布Web站点》的全新升级版本,作者在本书囊括了新的HTML5与CSS3技术,并采用易于理解的步骤式教程讲解了这些技
大小:104.9 MB前端电子书
-
JavaScript DOM编程艺术
非常畅销书全新升级,首版销售量确保。 书中详细说明开发Web运用的基石W3C的DOM标准,由提倡Web标准的大神领军人物执笔用心编写,表明了前端工程师的人生真谛,是学习培训JavaScript和DOM开发
大小:109.2 MBJavaScript电子书