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 相关文章推荐
jquery学习笔记二 实现可编辑的表格
Apr 09 Javascript
juqery 学习之六 CSS--css、位置、宽高
Feb 11 Javascript
PHP+jQuery+Ajax实现多图片上传效果
Mar 14 Javascript
jQuery插件pagination实现分页特效
Apr 12 Javascript
js阻止默认浏览器行为与冒泡行为的实现代码
May 15 Javascript
用js实现before和after伪类的样式修改的示例代码
Sep 07 Javascript
微信小程序倒计时功能实现代码
Nov 09 Javascript
jQuery.validate.js表单验证插件的使用代码详解
Oct 22 jQuery
vue中利用Promise封装jsonp并调取数据
Jun 18 Javascript
Vue项目中数据的深度监听或对象属性的监听实例
Jul 17 Javascript
解决Vue + Echarts 使用markLine标线(precision精度问题)
Jul 20 Javascript
vue修改Element的el-table样式的4种方法
Sep 17 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
动漫定律:眯眯眼都是怪物!这些角色狠话不多~
2020/03/03 日漫
php删除页面记录 同时刷新页面 删除条件用GET方式获得
2012/01/10 PHP
php中的注释、变量、数组、常量、函数应用介绍
2012/11/16 PHP
详解WordPress中添加友情链接的方法
2016/05/21 PHP
PHP正则表达式匹配替换与分割功能实例浅析
2017/02/04 PHP
javascript预览上传图片发现的问题的解决方法
2010/11/25 Javascript
关于html+ashx开发中几个问题的解决方法
2011/07/18 Javascript
js分页工具实例
2015/01/28 Javascript
jQuery Ajax使用实例
2015/04/16 Javascript
Javascript中的getUTCDay()方法使用详解
2015/06/10 Javascript
JQuery zClip插件实现复制页面内容到剪贴板
2015/11/02 Javascript
【经典源码收藏】基于jQuery的项目常见函数封装集合
2016/06/07 Javascript
js实现文字截断功能
2016/09/14 Javascript
jQuery手指滑动轮播效果
2016/12/22 Javascript
JQueryEasyUI框架下的combobox的取值和绑定的方法
2017/01/22 Javascript
从零开始学习Node.js系列教程一:http get和post用法分析
2017/04/13 Javascript
详解Angular 开发环境搭建
2017/06/22 Javascript
JavaScript简单实现的仿微博留言功能示例
2019/01/17 Javascript
微信小程序自定义扫码功能界面的实现代码
2020/07/02 Javascript
Python简单删除目录下文件以及文件夹的方法
2015/05/27 Python
基于Linux系统中python matplotlib画图的中文显示问题的解决方法
2017/06/15 Python
Python使用pandas处理CSV文件的实例讲解
2018/06/22 Python
Python使用Shelve保存对象方法总结
2019/01/28 Python
python 多线程串行和并行的实例
2019/02/22 Python
python 循环数据赋值实例
2019/12/02 Python
PyCharm第一次安装及使用教程
2020/01/08 Python
Python模块_PyLibTiff读取tif文件的实例
2020/01/13 Python
python GUI库图形界面开发之PyQt5中QMainWindow, QWidget以及QDialog的区别和选择
2020/02/26 Python
解决windows下python3使用multiprocessing.Pool出现的问题
2020/04/08 Python
css animation配合SVG制作能量流动效果
2021/03/24 HTML / CSS
四议两公开实施方案
2014/03/28 职场文书
10的分与合教学反思
2014/04/30 职场文书
小学生九一八纪念日83周年演讲稿500字
2014/09/17 职场文书
我的1919观后感
2015/06/03 职场文书
CSS 实现Chrome标签栏的技巧
2021/08/04 HTML / CSS
Java+swing实现抖音上的表白程序详解
2022/06/25 Java/Android