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 相关文章推荐
学习js所必须要知道的一些
Mar 07 Javascript
“不能执行已释放的Script代码”错误的原因及解决办法
Sep 09 Javascript
通过event对象的fromElement属性解决热区设置主实体的一个bug
Dec 22 Javascript
精通Javascript系列之数值计算
Jun 07 Javascript
一个简单的JS鼠标悬停特效具体方法
Jun 17 Javascript
JSON.parse()和JSON.stringify()使用介绍
Jun 20 Javascript
JS实现一个按钮的方法
Feb 05 Javascript
JavaScript的Polymer框架中dom-repeat与VM的相关操作
Jul 29 Javascript
Angular中支持SCSS的方法
Nov 18 Javascript
解决循环中setTimeout执行顺序的问题
Jun 20 Javascript
Angular中sweetalert弹框的基本使用教程
Jul 22 Javascript
微信小程序中的店铺评分组件及vue中用svg实现的评分显示组件
Nov 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
php设置允许大文件上传示例代码
2014/03/10 PHP
PHP微信分享开发详解
2017/01/14 PHP
解决PHP上传非标准格式的图片pjpeg失败的方法
2017/03/12 PHP
Laravel-admin之修改操作日志的方法
2019/09/30 PHP
效率高的Javscript字符串替换函数的benchmark
2008/08/02 Javascript
学习JS面向对象成果 借国庆发布个最新作品与大家交流
2009/10/03 Javascript
jQuery 数据缓存data(name, value)详解及实现
2010/01/04 Javascript
Js,alert出现乱码问题的解决方法
2013/06/19 Javascript
jquery 单引号和双引号的区别及使用注意
2013/07/31 Javascript
js综合应用实例简单的表格统计
2013/09/03 Javascript
js判断上传文件的类型和大小示例代码
2013/10/18 Javascript
JavaScript函数获取事件源的小例子
2014/05/14 Javascript
Node.js的包详细介绍
2015/01/14 Javascript
利用jquery获取select下拉框的值
2016/11/23 Javascript
jquery中用函数来设置css样式
2016/12/22 Javascript
微信小程序开发(二)图片上传+服务端接收详解
2017/01/11 Javascript
JS实现线性表的链式表示方法示例【经典数据结构】
2017/04/11 Javascript
Kindeditor单独调用单图上传增加预览功能的实例
2017/07/31 Javascript
vue项目中v-model父子组件通信的实现详解
2017/12/10 Javascript
vscode 开发Vue项目的方法步骤
2018/11/25 Javascript
vue路由--网站导航功能详解
2019/03/29 Javascript
基于vue-cli3和element实现登陆页面
2019/11/13 Javascript
浅谈Vue3.0新版API之composition-api入坑指南
2020/04/30 Javascript
[42:34]VP vs VG 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
以Python的Pyspider为例剖析搜索引擎的网络爬虫实现方法
2015/03/30 Python
python+Django+apache的配置方法详解
2016/06/01 Python
完美解决Pycharm无法导入包的问题 Unresolved reference
2018/05/18 Python
python中利用h5py模块读取h5文件中的主键方法
2018/06/05 Python
Python大数据之从网页上爬取数据的方法详解
2019/11/16 Python
详解如何在PyCharm控制台中输出彩色文字和背景
2020/08/17 Python
Feelunique中文官网:欧洲最大化妆品零售电商
2020/07/10 全球购物
机关单位人员学雷锋心得体会
2014/03/10 职场文书
寄语是什么意思
2014/04/10 职场文书
公司庆典欢迎词
2015/01/26 职场文书
2015年毕业生自荐信范文
2015/03/24 职场文书
5分钟教你docker安装启动redis全教程(全新方式)
2021/05/29 Redis