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 相关文章推荐
简单实用的反馈表单无刷新提交带验证
Nov 15 Javascript
javascript如何判断输入的url是否正确
Apr 11 Javascript
js仿黑客帝国字母掉落效果代码分享
Nov 08 Javascript
jQuery插件之Tocify动态节点目录菜单生成器附源码下载
Jan 08 Javascript
jQuery给div,Span, a ,button, radio 赋值与取值
Jun 24 Javascript
Angular实现较为复杂的表格过滤,删除功能示例
Dec 23 Javascript
Node.js readline 逐行读取、写入文件内容的示例
Mar 01 Javascript
Express的HTTP重定向到HTTPS的方法
Jun 06 Javascript
layui数据表格实现重载数据表格功能(搜索功能)
Jul 27 Javascript
vue中使用rem布局代码详解
Oct 30 Javascript
Vue使用v-viewer实现图片预览
Oct 21 Javascript
React如何使用axios请求数据并把数据渲染到组件
Aug 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桌面中心(三) 修改数据库
2007/03/11 PHP
使用PHPMYADMIN操作mysql数据库添加新用户和数据库的方法
2010/04/02 PHP
在WINDOWS中设置计划任务执行PHP文件的方法
2011/12/19 PHP
PHP 自定义错误处理函数的使用详解
2013/05/10 PHP
php格式化日期和时间格式化示例分享
2014/02/24 PHP
jQuery Ajax文件上传(php)
2009/06/16 Javascript
JS 面向对象之神奇的prototype
2011/02/26 Javascript
远离JS灾难css灾难之 js私有函数和css选择器作为容器
2011/12/11 Javascript
node.js+Ajax实现获取HTTP服务器返回数据
2014/11/26 Javascript
jQuery插件slicebox实现3D动画图片轮播切换特效
2015/04/12 Javascript
JS实现超简单的鼠标拖动效果
2015/11/02 Javascript
js全选按钮的实现方法
2015/11/17 Javascript
原生js仿jquery一些常用方法(必看篇)
2016/09/20 Javascript
JS碰撞运动实现方法详解
2016/12/15 Javascript
jQuery插件HighCharts绘制简单2D折线图效果示例【附demo源码】
2017/03/21 jQuery
Nodejs--post的公式详解
2017/04/29 NodeJs
详解刷新页面vuex数据不消失和不跳转页面的解决
2018/01/30 Javascript
浅谈React之状态(State)
2018/09/19 Javascript
JavaScript实现新年倒计时效果
2018/11/17 Javascript
pageGroup.js实现分页功能
2019/07/27 Javascript
Bootstrap table 服务器端分页功能实现方法示例
2020/06/01 Javascript
python获取本机外网ip的方法
2015/04/15 Python
WxPython建立批量录入框窗口
2019/02/27 Python
python图片二值化提高识别率代码实例
2019/08/24 Python
Flask中endpoint的理解(小结)
2019/12/11 Python
ddl,dml和dcl的含义
2016/05/08 面试题
城市规划毕业生求职信
2013/10/10 职场文书
管理科学大学生求职信
2013/11/13 职场文书
个人收入证明范本
2014/01/12 职场文书
保护母亲河倡议书
2014/04/14 职场文书
商场促销活动策划方案
2014/08/18 职场文书
基层干部群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
群众路线个人整改措施
2014/10/24 职场文书
小学师德师风整改措施
2014/10/27 职场文书
2015年教师业务工作总结
2015/05/26 职场文书
幼儿园小班开学寄语
2015/05/27 职场文书