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 相关文章推荐
top.location.href 没有权限 解决方法
Aug 05 Javascript
Javascript实现网络监测的方法
Jul 31 Javascript
jQuery中的一些常见方法小结(推荐)
Jun 13 Javascript
jQuery实现Select左右复制移动内容
Aug 05 Javascript
jQuery图片轮播(二)利用构造函数和原型创建对象以实现继承
Dec 06 Javascript
关于vue-router的beforeEach无限循环的问题解决
Sep 09 Javascript
jquery多级树形下拉菜单的实例代码
Jul 09 jQuery
layui 实现表格某一列显示图标
Sep 19 Javascript
Vue.js页面中有多个input搜索框如何实现防抖操作
Nov 04 Javascript
解决vue项目F5刷新mounted里的函数不执行问题
Nov 05 Javascript
JS实现简单移动端鼠标拖拽
Jul 23 Javascript
Vue中 axios delete请求参数操作
Aug 25 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
PHP删除非空目录的函数代码小结
2013/02/28 PHP
php启用zlib压缩文件的配置方法
2013/06/12 PHP
安装apache2.2.22配置php5.4(具体操作步骤)
2013/06/26 PHP
采用memcache在web集群中实现session的同步会话
2014/07/05 PHP
thinkPHP学习笔记之安装配置篇
2015/03/05 PHP
php浏览历史记录的方法
2015/03/10 PHP
Yii中实现处理前后台登录的新方法
2015/12/28 PHP
[原创]PHP实现SQL语句格式化功能的方法
2017/07/28 PHP
基于Laravel5.4实现多字段登录功能方法示例
2017/08/11 PHP
PHP中的Iterator迭代对象属性详解
2019/04/12 PHP
jquery $.getJSON()跨域请求
2011/12/21 Javascript
js获取dom的高度和宽度(可见区域及部分等等)
2013/06/13 Javascript
new Date()问题在ie8下面的处理方法
2014/07/31 Javascript
jQuery 浮动导航菜单适合购物商品类型的网站
2014/09/09 Javascript
javascript操作符&quot;!~&quot;详解
2015/02/10 Javascript
JavaScript实现基于Cookie的存储类实例
2015/04/10 Javascript
jquery使用ul模拟select实现表单美化的方法
2015/08/18 Javascript
js实现文字在按钮上滚动的方法
2015/08/20 Javascript
js手动播放图片实现图片轮播效果
2016/09/17 Javascript
Bootstrap页面缩小变形的快速解决办法
2017/02/03 Javascript
JS去除字符串中空格的方法
2017/02/14 Javascript
jQuery Autocomplete简介_动力节点Java学院整理
2017/07/17 jQuery
js实现简单页面全屏
2019/09/17 Javascript
JS端基于download.js实现图片、视频时直接下载而不是打开预览
2020/05/09 Javascript
python函数返回多个值的示例方法
2013/12/04 Python
Diango + uwsgi + nginx项目部署的全过程(可外网访问)
2018/04/22 Python
在python中利用KNN实现对iris进行分类的方法
2018/12/11 Python
python为QT程序添加图标的方法详解
2020/03/09 Python
python3.5的包存放的具体路径
2020/08/16 Python
Android interview questions
2016/12/25 面试题
linux面试题参考答案(3)
2012/09/13 面试题
修理厂厂长岗位职责
2014/01/30 职场文书
卫生院健康教育实施方案
2014/06/07 职场文书
学生穿着不得体检讨书
2014/10/12 职场文书
四则混合运算教学反思
2016/02/23 职场文书
2019年圣诞节祝福语集锦
2019/12/25 职场文书