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

在一些不正规的网站,尤其是那些挂满广告的下载站,经常在你点击的下载链接之前,无论你点击网页的任何一处都会弹出新窗口。本文主要和大家介绍javascript实现单击网页任意位置打开新窗口与关闭窗口的方法,涉及javascript窗口的相关操作函数与使用技巧,需要的朋友可以参考下,希望能帮助到大家。

这样的效果,可以轻松用JavaScript做到,还可以专门指定点击某一区域的p,才触发打开新窗口的事件。

比如下图的效果:

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

在原网页中,指定一个p,无论用户点击这个p的任意区域,都会打开新窗口,而点击其它地方则不会。

立即学习“Java免费学习笔记(深入)”;

在新窗口的地址栏不可以编辑,不能被调整大小,提供一个“关闭”按钮,关闭该窗口。

原网页的HTML布局如下,

nbsp;HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">          Untitled Document        

点击此任意一处打开广告

  

登录后复制

没什么好说的,就一个class为testClass的p。

关键是以下脚本。

  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("广告
"); //在Javascript中,利用window.close()可以关闭当前窗口,但不能关闭当前标签页,不过由于这个窗口是我们自己新生成的,因此对于所有浏览器有效 OpenWindow.document.write("

登录后复制

从以上的脚本可以看到window.open()这个方法参数很长。

其中:

第一个参数为空的意思,则意为新窗口的链接不是已有的网页,新窗口的内容是通过以下的两行Javascript生成的。如果要求新窗口的内容是已有的网页,则填写相应的url。

之后的参数是如下的意思,但只是对IE有效。

newwindow:弹出窗口的名字(不是文件名),非必须,可用空”代替。
height=100:新窗口高度。
width=400:新窗口宽度。
top=0:新窗口距离当前窗口上方的像素值。
left=0:窗口距离当前窗口左侧的像素值。
toolbar=false:是否显示工具栏,menubar,scrollbars表示菜单栏和滚动栏。
resizable=false:是否允许改变窗口大小
location=false:是否启用新窗口地址栏
status=false:是否显示状态栏。

相关推荐:

html如何用超链接打开新窗口时控制其属性

在html中怎样可以用超链接打开新窗口并且控制窗口属性

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

以上就是JavaScript单击网页任意位置打开新窗口与关闭窗口的实现代码的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2787149.html

(0)
上一篇 2025年3月8日 18:03:28
下一篇 2025年2月28日 09:52:38

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • JavaScript生成随机颜色简单方法

    本文主要和大家介绍javascript实现简单生成随机颜色的方法,涉及javascript随机数与字符串运算及页面元素属性动态操作相关实现技巧,需要的朋友可以参考下,希望能帮助到大家。 如果要做出如下效果,每次刷新网页则产生一种颜色 其实非…

    2025年3月8日
    000
  • AngularJS的$timeout使用代码详解

    本文主要和大家介绍angularjs 的$timeout服务示例代码,需要的朋友可以参考下,希望能帮助到大家。  nbsp;html>var app=angular.module(“myApp”,[]);app.controller(…

    编程技术 2025年3月8日
    200
  • JS路由跳转的简单方法

    js路由跳转功能有很多方法可以实现,本文主要和大家分享一个简单的js路由跳转功能,非常不错,需要的朋友参考下吧。希望能帮助到大家。 下面的连接中有复杂的路由跳转 Title CHINACHINA1CHINA2CHINA311111 var …

    编程技术 2025年3月8日
    200
  • 实现简单标签点击切换功能的JS代码分享

    本文主要和大家介绍js实现的简单标签点击切换功能,涉及javascript事件响应及页面元素遍历、属性动态变换等相关操作技巧,需要的朋友可以参考下,希望能帮助到大家 具体代码如下: nbsp;html>    www.php.cn  …

    编程技术 2025年3月8日
    200
  • JavaScript实现99乘法表代码

    本文主要和大家介绍使用javascript实现一个小程序之99乘法表的相关资料,需要的朋友可以参考下,希望能帮助到大家。 nbsp;html>   99乘法表     for (var i = 1; i <= 9; i++) {…

    2025年3月8日
    200
  • angularjs简单购物车功能实现方法

    本文主要和大家大家分享angularjs实现简单的购物车功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能帮助到大家。 nbsp;html>    Title   *{ margin: 0; padding: 0; mar…

    编程技术 2025年3月8日
    200
  • JS前端缓存的实现方法及 Cookie的特点介绍

    在前端浏览器中,有些数据(比如数据字典中的数据),可以在第一次请求的时候全部拿过来保存在js对象中,以后需要的时候就不用每次都去请求服务器了。对于那些大量使用数据字典来填充下拉框的页面,这种方法可以极大地减少对服务器的访问。这种方法特别适用…

    编程技术 2025年3月8日
    200
  • JS正则实现密码强度验证功能

    本文主要和大家介绍js基于正则表达式实现的密码强度验证功能,涉及javascript事件响应及基于正则的字符遍历、判断等相关操作技巧,需要的朋友可以参考下,希望能帮助到大家。 具体代码如下: nbsp;html>    www.jb5…

    编程技术 2025年3月8日
    200
  • JavaScript中new操作符详解

    javascript里实例化一个对象的时候,我们常用的方法就是使用new操作符。  本文主要和大家分享javascript中new操作符详解,希望能帮助到大家。 var Foo = function(x, y) { this.x = x t…

    编程技术 2025年3月8日
    200
  • JavaScript闭包详细介绍

    本文主要和大家详细介绍javascript闭包,说起闭包,相信写前端的同学都知道,而且相信在实际的项目中或多或少都已经用到了闭包。那到底什么才是闭包,闭包又是怎么产生的呢? 1. 什么是闭包在阮老师的文章中提到: 闭包就是能够读取其他函数内…

    编程技术 2025年3月8日
    200

发表回复

登录后才能评论