JavaScript实现单击网页任意位置打开新窗口与关闭窗口的方法


Posted in Javascript onSeptember 21, 2017

本文实例讲述了JavaScript实现单击网页任意位置打开新窗口与关闭窗口的方法。分享给大家供大家参考,具体如下:

在一些不正规的网站,尤其是那些挂满广告的下载站,经常在你点击的下载链接之前,无论你点击网页的任何一处都会弹出新窗口。

这样的效果,可以轻松用JavaScript做到,还可以专门指定点击某一区域的Div,才触发打开新窗口的事件。

比如下图的效果:

JavaScript实现单击网页任意位置打开新窗口与关闭窗口的方法

在原网页中,指定一个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" style="height:100px;border:1px solid #cccccc">点击此任意一处打开广告</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 相关文章推荐
jQuery 加上最后自己的验证
Nov 04 Javascript
jQuery第三课 修改元素属性及内容的代码
Mar 14 Javascript
jquery模拟按下回车实现代码
Sep 20 Javascript
用jQuery模拟页面加载进度条的实现代码
Dec 19 Javascript
验证码按回车不变解决方法
Mar 29 Javascript
js实现有过渡渐变效果的图片轮播相册(兼容IE,ff)
Jan 19 Javascript
bootstrap模态框关闭后清除模态框的数据方法
Aug 10 Javascript
微信小程序中使用自定义图标(阿里icon)的方法
Aug 20 Javascript
微信小程序仿知乎实现评论留言功能
Nov 28 Javascript
DatePickerDialog 自定义样式及使用全解
Jul 09 Javascript
使用vuex存储用户信息到localStorage的实例
Nov 11 Javascript
解决vue项目axios每次请求session不一致的问题
Oct 24 Javascript
shiro授权的实现原理
Sep 21 #Javascript
AngularJS 的$timeout服务示例代码
Sep 21 #Javascript
JS路由跳转的简单实现代码
Sep 21 #Javascript
JS实现的简单标签点击切换功能示例
Sep 21 #Javascript
使用JavaScript实现一个小程序之99乘法表
Sep 21 #Javascript
React-Native左右联动List的示例代码
Sep 21 #Javascript
angularjs实现简单的购物车功能
Sep 21 #Javascript
You might like
CPU步进是什么意思?i3-9100F B0步进和U0步进区别知识科普
2020/03/17 数码科技
Linux下进行MYSQL编程时插入中文乱码的解决方案
2007/03/15 PHP
关于PHP二进制流 逐bit的低位在前算法(详解)
2013/06/13 PHP
PHP mysqli_free_result()与mysqli_fetch_array()函数详解
2016/09/21 PHP
PHP多进程编程之僵尸进程问题的理解
2017/10/15 PHP
jQuery代码优化 遍历篇
2011/11/01 Javascript
javascript针对DOM的应用分析(四)
2012/04/15 Javascript
jQuery表格插件ParamQuery简单使用方法示例
2013/12/05 Javascript
JavaScript模拟重力状态下抛物运动的方法
2015/03/03 Javascript
JavaScript中的getDay()方法使用详解
2015/06/09 Javascript
不得不看之JavaScript构造函数及new运算符
2017/08/21 Javascript
vue.js中使用echarts实现数据动态刷新功能
2019/04/16 Javascript
vue3.0实现插件封装
2020/12/14 Vue.js
python回调函数的使用方法
2014/01/23 Python
Python3基础之条件与循环控制实例解析
2014/08/13 Python
举例讲解Python的Tornado框架实现数据可视化的教程
2015/05/02 Python
django.db.utils.ProgrammingError: (1146, u“Table‘’ doesn’t exist”)问题的解决
2018/07/13 Python
Python列表的切片实例讲解
2019/08/20 Python
Python 中@property的用法详解
2020/01/15 Python
python实现连连看游戏
2020/02/14 Python
基于html和CSS3制作酷炫的导航栏
2015/09/23 HTML / CSS
十一酒店活动方案
2014/02/20 职场文书
高中军训第一天感言
2014/03/06 职场文书
优秀广告词大全
2014/03/19 职场文书
大学生就业意向书范文
2014/04/01 职场文书
人力资源管理系自荐信
2014/05/31 职场文书
七一建党日演讲稿
2014/09/05 职场文书
主持人开幕词
2015/01/29 职场文书
土建施工员岗位职责
2015/04/11 职场文书
2015年项目工作总结
2015/04/29 职场文书
运动会加油稿30字
2015/07/21 职场文书
婚礼嘉宾致辞
2015/07/28 职场文书
幼儿园心得体会范文
2016/01/21 职场文书
《葡萄沟》教学反思
2016/02/23 职场文书
2019班干部竞选演讲稿范本!
2019/07/08 职场文书
mysql 生成连续日期及变量赋值
2022/03/20 MySQL