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 相关文章推荐
精解window.setTimeout()&amp;window.setInterval()使用方式与参数传递问题!
Nov 23 Javascript
jQuery ready函数滥用分析
Feb 16 Javascript
JS 去除Array中的null值示例代码
Nov 20 Javascript
jQuery过滤选择器:not()方法使用介绍
Apr 20 Javascript
利用a标签自动解析URL分析网址实例
Oct 20 Javascript
node.js中的fs.fstat方法使用说明
Dec 15 Javascript
需要牢记的JavaScript基础知识
Sep 25 Javascript
Node.js 数据加密传输浅析
Nov 16 Javascript
微信小程序 picker 组件详解及简单实例
Jan 10 Javascript
JavaScript使用indexOf()实现数组去重的方法分析
Sep 04 Javascript
vue中使用微信公众号js-sdk踩坑记录
Mar 29 Javascript
详解mpvue中使用vant时需要注意的onChange事件的坑
May 16 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
神族 PROTOSS 概述
2020/03/14 星际争霸
PHP 的几个配置文件函数
2006/12/21 PHP
php多文件上传实现代码
2014/02/20 PHP
PHP+jQuery+Ajax实现分页效果 jPaginate插件的应用
2015/10/09 PHP
PHP实现关键字搜索后描红功能示例
2019/07/03 PHP
使用JQuery和CSS模拟超链接的用户单击事件的实现代码
2012/05/23 Javascript
基于jquery &amp; json的省市区联动代码
2012/06/26 Javascript
jQuery 回车事件enter使用示例
2014/02/18 Javascript
jQuery实现感应鼠标动画效果自动伸长的输入框实例
2015/02/24 Javascript
jquery表单对象属性过滤选择器实例分析
2015/05/18 Javascript
jquery控制页面部分刷新的方法
2015/06/24 Javascript
如何解决谷歌浏览器下jquery无法获取图片的尺寸
2015/09/10 Javascript
javascript实现动态显示颜色块的报表效果
2017/04/10 Javascript
微信小程序实现轮播图效果
2017/09/07 Javascript
vue axios 给生产环境和发布环境配置不同的接口地址(推荐)
2018/05/08 Javascript
js实现的格式化数字和金额功能简单示例
2019/07/30 Javascript
nodemon实现Typescript项目热更新的示例代码
2019/11/19 Javascript
JavaScript 引用类型实例详解【数组、对象、严格模式等】
2020/05/13 Javascript
Python threading多线程编程实例
2014/09/18 Python
Python导入txt数据到mysql的方法
2015/04/08 Python
python中PS 图像调整算法原理之亮度调整
2019/06/28 Python
通过实例了解Python str()和repr()的区别
2020/01/17 Python
Pytorch 实现数据集自定义读取
2020/01/18 Python
TensorFlow-gpu和opencv安装详细教程
2020/06/30 Python
Python如何爬取b站热门视频并导入Excel
2020/08/10 Python
python中使用.py配置文件的方法详解
2020/11/23 Python
用python监控服务器的cpu,磁盘空间,内存,超过邮件报警
2021/01/29 Python
Lampegiganten丹麦:欧洲领先的照明网上商店
2018/04/25 全球购物
联强国际笔试题面试题
2013/07/10 面试题
大学生标准推荐信范文
2013/11/25 职场文书
副总经理岗位职责
2014/03/16 职场文书
小学生竞选班长演讲稿
2014/04/24 职场文书
大学新学期计划书
2014/04/28 职场文书
婚礼父母致辞
2015/07/28 职场文书
完美处理python与anaconda环境变量的冲突问题
2021/04/07 Python
python urllib库的使用详解
2021/04/13 Python