当前位置：主页 > javascript教程 > JavaScript实现单击网页任意位置打开新窗口与关闭窗口的方法

JavaScript实现单击网页任意位置打开关闭窗口的代码

  • 更新时间：2020-06-29 08:25:28
  • 编辑：贾飞翼
本站收集了一篇相关的编程文章，网友弘元正根据主题投稿了本篇教程内容，涉及到JavaScript、单击、网页、任意位置、打开新窗口、关闭窗口、JavaScript实现单击网页任意位置打开新窗口与关闭窗口的方法相关内容，已被251网友关注，涉猎到的知识点内容可以在下方电子书获得。

参考资料

正文内容

JavaScript实现单击网页任意位置打开新窗口与关闭窗口的方法

本文实例讲述了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" >点击此任意一处打开广告</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关于“时间”的一次探索，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

    发布时间：2020-02-01

  • JavaScript格式化数字、金额、千分位、保留几位小数、舍入舍去的实例代码

    这篇文章主要介绍了JavaScript 格式化数字、金额、千分位、保留几位小数、舍入舍去，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随

    发布时间：2020-01-06

  • JavaScript 中的 JSON的知识点整理

    我们先来看一个JS中常见的JS对象序列化成JSON字符串的问题，请问，以下JS对象通过JSON.stringify后的字符串是怎样的

    发布时间：2020-03-26

  • JavaScript如何实现注册时密码强度校验

    这篇文章主要为大家详细介绍了JavaScript注册时密码强度校验代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

    发布时间：2020-03-07

  • 如何处理jQuery符号$与其他javascript 库、框架冲突的问题

    下面小编就为大家带来一篇完美解决jQuery符号$与其他javascript 库、框架冲突的问题。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧

    发布时间：2020-01-13

  • JavaScript String 对象常用实例方法

    下面小编就为大家带来一篇JavaScript String 对象常用方法详解。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

    发布时间：2020-04-06

  • JavaScript中的ignoreCase属性使用方法

    这篇文章主要介绍了JavaScript正则表达式中的ignoreCase属性使用详解,是JS学习进阶中的重要知识点,需要的朋友可以参考下

    发布时间：2020-01-05

  • 介绍javascript中递归函数的小注意

    这篇文章主要针对javascript中递归函数用法注意点做介绍，有需要小伙伴可以来学习下

    发布时间：2020-03-14

  • 《PHP、MySQL与JavaScript学习手册》学习笔记与总结

    php常用系统函数大全 字符串函数 strlen：获取字符串长度，字节长度 substr_count 某字符串出现的次数 substr：字符串截取，获取字符串（按照字节进行截取） mb_strlen mb_substr strchr：与substr相似，从指定位置截取一直到最后 strrchr（获取文件后缀名）：与strchr一样，只是从右边开始查找字符 strtolower：所有的字符都小写（针对英文字母） strtoupper：所有的字符都大写 strrev：字符串反转（

    发布时间：2018-10-19

  • 分享JavaScript 获取元素在父节点中的下标技巧

    jQuery中直接通过$(this).index()即可得到当前元素的下标。下面通过实例给大家介绍JavaScript 获取元素在父节点中的下标，需要的朋友参考下吧

    发布时间：2020-02-12

  • JavaScript编程精解

    JavaScript编程精解

    JavaScript编程精解(原书第2版) 的第2版经过全面的更新和修订，覆盖了JavaScript的绝大多数语言特性，涉及Web编程和Node.js服务器编程，以及JavaScript性能优化等。《JavaScript编程精解(原书第2版)》的

    大小：96.4 MBJavaScript电子书

  • 你不知道的JavaScript（中卷）

    你不知道的JavaScript（中卷）

    JavaScript这门语言简单易用，很容易上手，但其语言机制复杂微妙，即使是经验丰富的JavaScript开发人员，如果没有认真学习的话也无法真正理解。

    大小：7.8 MBJS电子书

  • 大型JavaScript应用最佳实践指南

    大型JavaScript应用最佳实践指南

    大小：35 MBJavaScript电子书

  • JavaScript基础教程

    JavaScript基础教程

    本书是经典的JavaScript入门书，以易学便查、图文并茂、循序渐进和善于用常见任务讲解语言知识而著称。书中从JavaScript语言基础开始，分别讨论了图像、框架、浏览器窗口、表单、正则表达式

    大小：14 MBJS教程电子书

  • JavaScript前端开发案例教程

    JavaScript前端开发案例教程

    JavaScript是这种运用于Web前端开发的开发语言，具备简易、易懂、实用的特性，用JavaScript开发设计网页页面能够提高网页页面的参与性，为客户出示即时的、动态性的互动感受。 《 JavaScript前端

    大小：75.1 MBJS前端电子书

  • 21天学通HTML+CSS+JavaScript Web开发

    21天学通HTML+CSS+JavaScript Web开发

    21天学通HTML CSS JavaScript Web开发（第7版） 是全球畅销书《21天学通使用HTML与CSS发布Web站点》的全新升级版本，作者在本书囊括了新的HTML5与CSS3技术，并采用易于理解的步骤式教程讲解了这些技

    大小：104.9 MB前端电子书

  • JavaScript DOM编程艺术

    JavaScript DOM编程艺术

    非常畅销书全新升级，首版销售量确保。 书中详细说明开发Web运用的基石W3C的DOM标准，由提倡Web标准的大神领军人物执笔用心编写，表明了前端工程师的人生真谛，是学习培训JavaScript和DOM开发

    大小：109.2 MBJavaScript电子书

用户留言

发布评论

最新更新

热门推荐