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 相关文章推荐
为Yahoo! UI Extensions Grid增加内置的可编辑器
Mar 10 Javascript
javascript 延迟加载技术(lazyload)简单实现
Jan 17 Javascript
JavaScript调用客户端的可执行文件(示例代码)
Nov 28 Javascript
js使用removeChild方法动态删除div元素
Aug 01 Javascript
js与jQuery实现checkbox复选框全选/全不选的方法
Jan 05 Javascript
关于Sequelize连接查询时inlude中model和association的区别详解
Feb 27 Javascript
vue组件父与子通信详解(一)
Nov 07 Javascript
vue拦截器实现统一token,并兼容IE9验证功能
Apr 26 Javascript
vue组件name的作用小结
May 23 Javascript
node实现socket链接与GPRS进行通信的方法
May 20 Javascript
node.js 微信开发之定时获取access_token
Feb 07 Javascript
vue使用transition组件动画效果的实例代码
Jan 28 Vue.js
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操作数组的一些函数整理介绍
2011/07/17 PHP
PHP生成不重复随机数的方法汇总
2014/11/19 PHP
ThinkPHP中session函数详解
2016/09/14 PHP
php打开本地exe程序,js打开本地exe应用程序,并传递相关参数方法
2018/02/06 PHP
laravel框架模型和数据库基础操作实例详解
2020/01/25 PHP
基于jQuery判断两个元素是否有重叠部分的代码
2012/07/25 Javascript
JavaScript 反科里化 this [译]
2012/09/20 Javascript
JQuery的Ajax中Post方法传递中文出现乱码的解决方法
2014/10/21 Javascript
jQuery的几个我们必须了解的特点
2015/05/03 Javascript
JavaScript操作class和style样式代码详解
2016/02/13 Javascript
jQuery学习心得总结(必看篇)
2016/06/10 Javascript
JavaScript-html标题滚动效果的简单实现
2016/09/08 Javascript
jquery网页日历显示控件calendar3.1使用详解
2016/11/24 Javascript
vue2.0 常用的 UI 库实例讲解
2017/12/12 Javascript
JS实现留言板功能[楼层效果展示]
2017/12/27 Javascript
微信小程序项目实践之主页tab选项实现
2018/07/18 Javascript
小程序数据通信方法大全(推荐)
2019/04/15 Javascript
微信小程序云开发之使用云存储
2019/05/17 Javascript
VUE脚手架具体使用方法
2019/05/20 Javascript
微信小程序实现左侧滑栏过程解析
2019/08/26 Javascript
[04:46]2018年度玩家喜爱的电竞媒体-完美盛典
2018/12/16 DOTA
[01:38:19]夜魇凡尔赛茶话会 第五期
2021/03/11 DOTA
Python多线程编程(二):启动线程的两种方法
2015/04/05 Python
在Pycharm中项目解释器与环境变量的设置方法
2018/10/29 Python
对python中UDP,socket的使用详解
2019/08/22 Python
解决Django migrate不能发现app.models的表问题
2019/08/31 Python
python Manager 之dict KeyError问题的解决
2019/12/21 Python
python pip如何手动安装二进制包
2020/09/30 Python
网页布局中CSS样式无效的十个重要原因详解
2017/08/10 HTML / CSS
德国EGOIST网店:销售畅销的设计师品牌
2017/04/18 全球购物
集团薪酬管理制度
2014/01/13 职场文书
解除施工合同协议书
2014/10/17 职场文书
服装店员工管理制度
2015/08/07 职场文书
七年级作文之关于奶奶
2019/10/29 职场文书
详解CocosCreator项目结构机制
2021/04/14 Javascript
MYSQL主从数据库同步备份配置的方法
2021/05/26 MySQL