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+XMLHttpRequest+asp.net无刷新读取数据库数据
Aug 09 Javascript
Jquery使用Firefox FireBug插件调试Ajax步骤讲解
Dec 02 Javascript
jQuery鼠标事件汇总
Aug 30 Javascript
基于JavaScript实现手机短信按钮倒计时(超简单)
Dec 30 Javascript
js原生实现FastClick事件的实例
Nov 20 Javascript
JavaScript基于自定义函数判断变量类型的实现方法
Nov 23 Javascript
JavaScript实现简单的四则运算计算器完整实例
Apr 28 Javascript
实现div内部滚动条滚动到底部和顶部的代码
Nov 15 Javascript
js最实用string(字符串)类型的使用及截取与拼接详解
Apr 26 Javascript
深入了解JavaScript代码覆盖
Jun 13 Javascript
LayUI动态设置checkbox不显示的解决方法
Sep 02 Javascript
JS前端基于canvas给图片添加水印
Nov 11 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
在apache下限制每个虚拟主机的并发数!!!!
2006/10/09 PHP
php实现webservice实例
2014/11/06 PHP
在Laravel 的 Blade 模版中实现定义变量
2019/10/14 PHP
Javascript对象中关于setTimeout和setInterval的this介绍
2012/07/21 Javascript
js动态添加onload、onresize、onscroll事件(另类方法)
2012/12/26 Javascript
jQuery aminate方法定位到页面具体位置
2013/12/26 Javascript
JSON+Jquery省市区三级联动
2016/01/13 Javascript
Vue.js每天必学之内部响应式原理探究
2016/09/07 Javascript
JavaScript仿微博发布信息案例
2016/11/16 Javascript
jQuery操作DOM_动力节点Java学院整理
2017/07/04 jQuery
underscore之Chaining_动力节点Java学院整理
2017/07/10 Javascript
Webpack性能优化 DLL 用法详解
2017/08/10 Javascript
AngularJS使用ui-route实现多层嵌套路由的示例
2018/01/10 Javascript
纯JS实现出生日期[年月日]下拉菜单效果
2018/06/01 Javascript
JavaScript类的继承操作实例总结
2018/12/20 Javascript
vue使用better-scroll实现滑动以及左右联动
2020/06/30 Javascript
python实现巡检系统(solaris)示例
2014/04/02 Python
python版学生管理系统
2018/01/10 Python
tensorflow学习教程之文本分类详析
2018/08/07 Python
Python中修改字符串的四种方法
2018/11/02 Python
Python实现正则表达式匹配任意的邮箱方法
2018/12/20 Python
python 模拟银行转账功能过程详解
2019/08/06 Python
python基于pygame实现飞机大作战小游戏
2020/11/19 Python
python 通过 pybind11 使用Eigen加速代码的步骤
2020/12/07 Python
html5-websocket基于远程方法调用的数据交互实现
2012/12/04 HTML / CSS
Answear匈牙利:来自全球200多个知名时尚品牌
2017/04/21 全球购物
Artist Guitars新西兰:乐器在线商店
2017/09/17 全球购物
应用艺术毕业生的自我评价
2013/12/04 职场文书
聚美优品的广告词
2014/03/14 职场文书
环境建设实施方案
2014/03/14 职场文书
中学生期中自我鉴定
2014/04/20 职场文书
2015年个人剖析材料范文
2014/12/29 职场文书
七一晚会主持词
2015/06/29 职场文书
实验室安全管理制度
2015/08/05 职场文书
先进教师个人主要事迹材料
2015/11/03 职场文书
学习计划是什么
2019/04/30 职场文书