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 相关文章推荐
iframe 上下滚动条如何默认在下方实现原理
Dec 10 Javascript
聊一聊JavaScript作用域和作用域链
May 03 Javascript
javascript中使用未定义变量或值的情况分析
Jul 19 Javascript
jQuery实现的超链接提示效果示例【附demo源码下载】
Sep 09 Javascript
javaScript中定义类或对象的五种方式总结
Dec 04 Javascript
基于jQuery实现数字滚动效果
Jan 16 Javascript
javascript闭包功能与用法实例分析
Apr 06 Javascript
Node.js pipe实现源码解析
Aug 12 Javascript
浅谈JS中this在各个场景下的指向
Aug 14 Javascript
关于layui 弹出层一闪而过就消失的解决方法
Sep 09 Javascript
ES6函数实现排它两种写法解析
May 13 Javascript
Vue打包部署到Nginx时,css样式不生效的解决方式
Aug 03 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 socket实现的聊天室代码分享
2014/08/16 PHP
PHP生成唯一ID之SnowFlake算法
2016/12/17 PHP
PDO::prepare讲解
2019/01/29 PHP
thinkphp框架表单数组实现图片批量上传功能示例
2020/04/04 PHP
13个绚丽的Jquery 界面设计网站推荐
2010/09/28 Javascript
JS远程获取网页源代码实例
2013/09/05 Javascript
JavaScript实现生成GUID(全局统一标识符)
2014/09/05 Javascript
jqgrid实现简单的单行编辑功能
2017/09/30 Javascript
angularJs使用ng-repeat遍历后选中某一个的方法
2018/09/30 Javascript
vscode 开发Vue项目的方法步骤
2018/11/25 Javascript
JS随机密码生成算法
2019/09/23 Javascript
vue动画—通过钩子函数实现半场动画操作
2020/08/09 Javascript
浅谈终端直接执行py文件,不需要python命令
2017/01/23 Python
Python实现PS滤镜的旋转模糊功能示例
2018/01/20 Python
python遍历一个目录,输出所有的文件名的实例
2018/04/23 Python
基于python实现简单日历
2018/07/28 Python
基于OpenCV python3实现证件照换背景的方法
2019/03/22 Python
Python开发之Nginx+uWSGI+virtualenv多项目部署教程
2019/05/13 Python
Python2.7实现多进程下开发多线程示例
2019/05/31 Python
PyQt4编程之让状态栏显示信息的方法
2019/06/18 Python
Python 一键获取百度网盘提取码的方法
2019/08/01 Python
python使用pygame实现笑脸乒乓球弹珠球游戏
2019/11/25 Python
Python基础之变量基本用法与进阶详解
2020/01/03 Python
英国泰坦旅游网站:全球陪同游览,邮轮和铁路旅行
2016/11/29 全球购物
Desigual英国官网:在线购买原创服装
2018/03/09 全球购物
The North Face北面法国官网:美国著名户外品牌
2019/11/01 全球购物
PHP数据运算类型都有哪些
2013/11/05 面试题
个人求职自荐信范文
2014/06/20 职场文书
党员剖析材料范文
2014/12/18 职场文书
2014年保险业务员工作总结
2014/12/23 职场文书
2016党员干部廉洁自律心得体会
2016/01/13 职场文书
2016优秀大学生个人事迹材料范文
2016/03/01 职场文书
React Hook用法示例详解(6个常见hook)
2021/04/28 Javascript
css 边框添加四个角的实现代码
2021/10/16 HTML / CSS
CentOS7安装GlusterFS集群以及相关配置
2022/04/12 Servers
win10蓝屏0xc0000001安全模式进不了怎么办?win10出现0xc0000001的解决方法
2022/08/05 数码科技