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 相关文章推荐
js数组的操作详解
Mar 27 Javascript
JS获得QQ号码的昵称,头像,生日的简单实例
Dec 04 Javascript
ExtJS中设置下拉列表框不可编辑的方法
May 07 Javascript
javascript 处理null及null值示例
Jun 09 Javascript
Linux下使用jq友好的打印JSON技巧分享
Nov 18 Javascript
百度地图自定义控件分享
Mar 04 Javascript
js获取页面引用的css样式表中的属性值方法(推荐)
Aug 19 Javascript
JavaScript之WebSocket技术详解
Nov 18 Javascript
Bootstrap popover 实现鼠标移入移除显示隐藏功能方法
Jan 24 Javascript
JavaScript异步加载问题总结
Feb 17 Javascript
Vue源码中要const _toStr = Object.prototype.toString的原因分析
Dec 09 Javascript
详解js根据百度地图提供经纬度计算两点距离
May 13 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中的null合并运算符
2015/12/30 PHP
半角全角相互转换的js函数
2009/10/16 Javascript
json格式化/压缩工具 Chrome插件扩展版
2010/05/25 Javascript
javascript 获取所有id中包含某关键字的控件的实现代码
2010/11/25 Javascript
js 得到文件后缀(通过正则实现)
2013/07/08 Javascript
js Array操作的最简短最容易理解方法
2013/12/09 Javascript
微信JS-SDK坐标位置如何转换为百度地图坐标
2016/07/04 Javascript
jQuery UI制作选项卡(tabs)
2016/12/13 Javascript
ionic实现底部分享功能
2017/05/11 Javascript
JavaScript享元模式原理与用法实例详解
2020/03/09 Javascript
微信小程序自定义扫码功能界面的实现代码
2020/07/02 Javascript
JavaScript日期库date-fn.js使用方法解析
2020/09/09 Javascript
详解datagrid使用方法(重要)
2020/11/06 Javascript
python3 实现的人人影视网站自动签到
2016/06/19 Python
Python 模块EasyGui详细介绍
2017/02/19 Python
详谈Python基础之内置函数和递归
2017/06/21 Python
Python中的pygal安装和绘制直方图代码分享
2017/12/08 Python
kaggle+mnist实现手写字体识别
2018/07/26 Python
tensorflow如何批量读取图片
2019/08/29 Python
浅谈html5 video 移动端填坑记
2018/01/15 HTML / CSS
WoolOvers澳洲官方网站:英国针织服装公司
2018/05/13 全球购物
澳大利亚排名第一的儿童在线玩具商店:Toy Galaxy
2018/10/06 全球购物
美国购买隐形眼镜网站:Lenses For Less
2020/07/05 全球购物
The North Face官方旗舰店:美国著名户外品牌
2020/09/28 全球购物
介绍一下如何优化MySql
2016/12/20 面试题
新员工培训个人的自我评价
2013/10/09 职场文书
给老婆的保证书范文
2014/04/28 职场文书
解放思想演讲稿
2014/09/11 职场文书
校园游戏活动新闻稿
2014/10/15 职场文书
大雁塔英文导游词
2015/02/10 职场文书
2015年妇联工作总结范文
2015/04/22 职场文书
2015年信息宣传工作总结
2015/05/26 职场文书
2016年感恩教师节活动总结
2016/04/01 职场文书
《天使的翅膀》读后感3篇
2019/12/20 职场文书
idea 在springboot中使用lombok插件的方法
2021/08/02 Java/Android
css3手动实现pc端横向滚动
2022/06/21 HTML / CSS