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脚本调试方法小结
Nov 24 Javascript
jQuery实现异步获取json数据的2种方式
Aug 29 Javascript
jQuery使用hide方法隐藏页面上指定元素的方法
Mar 30 Javascript
Bootstrap打造一个左侧折叠菜单的系统模板(一)
May 17 Javascript
JS Canvas定时器模拟动态加载动画
Sep 17 Javascript
jQuery返回定位插件详解
May 15 jQuery
详解使用VueJS开发项目中的兼容问题
Aug 02 Javascript
vue解决一个方法同时发送多个请求的问题
Sep 25 Javascript
vue实现pdf文档在线预览功能
Nov 26 Javascript
解决vue elementUI 使用el-select 时 change事件的触发问题
Nov 17 Vue.js
JavaScript缓动动画函数的封装方法
Nov 25 Javascript
基于VUE实现简单的学生信息管理系统
Jan 13 Vue.js
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
饭制《星际争霸》Mod:优化游戏机制 增加新单位
2017/07/02 星际争霸
php 之 没有mysql支持时的替代方案
2006/10/09 PHP
php实现用手机关闭计算机(电脑)的方法
2015/04/22 PHP
PHP三种方式实现链式操作详解
2017/01/21 PHP
jQuery ajax+PHP实现的级联下拉列表框功能示例
2019/02/12 PHP
通过正则表达式实现表单验证是否为中文
2014/02/18 Javascript
JQuery EasyUI 日期控件如何控制日期选择区间
2014/05/05 Javascript
返回顶部按钮响应滚动且动态显示与隐藏
2014/10/14 Javascript
javascript使用call调用微信API
2014/12/15 Javascript
JavaScript动态创建link标签到head里的方法
2014/12/22 Javascript
浅谈JavaScript function函数种类
2014/12/29 Javascript
jQuery动画效果实现图片无缝连续滚动
2016/01/12 Javascript
AngularJs  Using $location详解及示例代码
2016/09/02 Javascript
微信小程序使用第三方库Underscore.js步骤详解
2016/09/27 Javascript
利用jQuery插件imgAreaSelect实现获得选择域的图像信息
2016/12/02 Javascript
canvas的神奇用法
2017/02/03 Javascript
详解AngularJS1.x学习directive 中‘&amp; ’‘=’ ‘@’符号的区别使用
2017/08/23 Javascript
浅谈react性能优化的方法
2018/09/05 Javascript
JavaScript实现图片的放大缩小及拖拽功能示例
2019/05/14 Javascript
jquery+php后台实现省市区联动功能示例
2019/05/23 jQuery
vue实现自定义多选按钮
2020/07/16 Javascript
vue实现多个echarts根据屏幕大小变化而变化实例
2020/07/19 Javascript
利用python爬取斗鱼app中照片方法实例
2017/12/03 Python
python向已存在的excel中新增表,不覆盖原数据的实例
2018/05/02 Python
python调用matlab的m自定义函数方法
2019/02/18 Python
Python实现读取txt文件中的数据并绘制出图形操作示例
2019/02/26 Python
Python3.5集合及其常见运算实例详解
2019/05/01 Python
Python实现时间序列可视化的方法
2019/08/06 Python
pandas 强制类型转换 df.astype实例
2020/04/09 Python
蹦床仓库:Trampoline Warehouse
2018/12/06 全球购物
工程部主管岗位职责
2013/11/17 职场文书
优秀信贷员先进事迹
2014/01/31 职场文书
音乐教育专业自荐信
2014/09/18 职场文书
党的群众路线教育实践活动个人对照检查材料(教师)
2014/11/04 职场文书
三好学生主要事迹怎么写
2015/11/03 职场文书
HTML怎么设置下划线?html文字加下划线方法
2021/12/06 HTML / CSS