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 相关文章推荐
Javascript里使用Dom操作Xml
Sep 20 Javascript
jQuery UI-Draggable 参数集合
Jan 10 Javascript
js function使用心得
May 10 Javascript
jQuery之排序组件的深入解析
Jun 19 Javascript
Jquery注册事件实现方法
May 18 Javascript
jQuery通过写入cookie实现更换网页背景的方法
Apr 15 Javascript
使用jQuery Mobile框架开发移动端Web App的入门教程
May 17 Javascript
vue从使用到源码实现教程详解
Sep 19 Javascript
5 种JavaScript编码规范
Jan 30 Javascript
基于vue v-for 循环复选框-默认勾选第一个的实现方法
Mar 03 Javascript
jQuery实现的点击按钮改变样式功能示例
Jul 21 jQuery
node.js文件的复制、创建文件夹等相关操作
Feb 05 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截取后台登陆密码的代码
2012/05/05 PHP
日常整理PHP中简单的图形处理(经典)
2015/10/26 PHP
PHP面向对象编程之深入理解方法重载与方法覆盖(多态)
2015/12/24 PHP
YII2.0之Activeform表单组件用法实例
2016/01/09 PHP
php根据地址获取百度地图经纬度的实例方法
2019/09/03 PHP
用js重建星际争霸
2006/12/22 Javascript
Jquery中获取iframe的代码
2011/01/11 Javascript
让你的CSS像Jquery一样做筛选的实现方法
2011/07/10 Javascript
jQuery.extend 函数的详细用法
2012/06/27 Javascript
我的Node.js学习之路(四)--单元测试
2014/07/06 Javascript
javascript 对象数组根据对象object key的值排序
2015/03/09 Javascript
JavaScript显示表单内元素数量的方法
2015/04/02 Javascript
JS数组array元素的添加和删除方法代码实例
2015/06/01 Javascript
多种js图片预加载实现方式分享
2016/02/19 Javascript
浅析jQuery 3.0中的Data
2016/06/14 Javascript
Angularjs在初始化未完毕时出现闪烁问题的解决方法分析
2016/08/05 Javascript
JavaScript面试题大全(推荐)
2016/09/22 Javascript
解析Vue2 dist 目录下各个文件的区别
2017/11/22 Javascript
vuex + axios 做登录验证 并且保存登录状态的实例
2018/09/16 Javascript
vue实现可视化可拖放的自定义表单的示例代码
2019/03/20 Javascript
Bootstrap实现模态框效果
2019/09/30 Javascript
微信小程序开发(二):页面跳转并传参操作示例
2020/06/01 Javascript
js中实现继承的五种方法
2021/01/25 Javascript
[01:46]DOTA2上海特锦赛小组赛英文解说KotlGuy采访
2016/02/27 DOTA
python切换hosts文件代码示例
2013/12/31 Python
Python 文件处理注意事项总结
2017/04/10 Python
python实现ftp文件传输功能
2020/03/20 Python
哪些情况下不应该使用索引
2015/07/20 面试题
危货运输企业安全生产责任书
2014/07/28 职场文书
热情服务标语
2014/10/07 职场文书
大学生自我推荐信范文
2015/03/24 职场文书
2015年房地产个人工作总结
2015/05/26 职场文书
幼儿园中班教育随笔
2015/08/14 职场文书
2016年党员干部廉政承诺书
2016/03/24 职场文书
提升Nginx性能的一些建议
2021/03/31 Servers
TV动画《神废柴☆偶像》公布先导PV
2022/03/20 日漫