window事件是较为重要的事件,接下来就讲解一下。

1.获取页面滚动栏的距离

  什么是滚动栏,就是网页内容过多时,通过滚轮控制上下显示或者左右显示;

  为窗口添加滚动条事件:
  window.onscroll=function(){};
  注意在获取滚动条距离的时候
  谷歌不识别document.documentElement.scrollTop,必须要加上document.body.scrollTop;即
  var scrolltop=document.documentElement.scrollTop||document.body.scrollTop;
  这样才能兼容各个浏览器。
  这个事件一般用作当页面滚动到某个距离时才出发某个事件的情况,
  比如京东的导航条:

以及滑到底部的时候出发一个回到顶部的事件

几种打开新超链接的方式:

1.替换当前窗口,可后退

  html写法:<a href="http://www.baidu.com" target="_self">

  效果:  

  JS写法:<a href="javascript:open('http://www.baidu.com','_self')">替换当前窗口,可后退</a>

  效果:  

2.替换当前窗口不可后退

  html无法做到;

  JS写法:<a href="javascript:location.replace('http://www.baidu.com')">替换当前窗口,不可后退</a>

  效果:

3.在新窗口打开,可以打开多个

  html写法:<a href="http://www.baidu.com" target="_blank">在新窗口打开,可以打开多个</a>

  效果:

  

  JS写法:<a href="javascript:open('http://www.baidu.com','_blank')">在新窗口打开,可以打开多个</a>

  效果:

4.在新窗口打开,只能打开一个

  html写法:<a href="http://www.bailiban.com" target="bailiban">新窗口打开,只能打开一个</a>

  效果:

  JS写法:<a href="javascript:open('http://www.bailiban.com','k')" >新窗口打开,只能打开一个</a>

  效果:

注意:

  打开窗口语法:
           var newWindow = window.open(url,name,网页信息)
           name页面的名称,不能省略
          window.close() 注意有些浏览器不允许关闭自身
          设计好的一些name属性:
               _self 自动获取当前窗口的name
              _blank 不让浏览器的name为空

  上述中只打开一个页面的操作就是name值带来的,类似于给前面的网址取了一个名字,通过name值来打开网页

    

window事件的更多相关文章

  1. JavaScript 获取按键,并屏蔽系统 Window 事件

    // JavaScript 获取按键,并屏蔽系统 Window 事件 window.document.onkeydown = onkeydown; function onkeydown(event) ...

  2. angular 使用window事件

    1. 使用host   2. 使用HostListener 推荐使用第二种方式. 不推荐下面的方法,虽然也能进行window事件的绑定,但组件销毁后,window事件任然保留,即使手动在组件的ngOn ...

  3. (非妙味3):浏览器window事件:及浏览各种尺寸介绍

    (触发)window.onload;  window.onscroll;   window.onresize; (兼容)网页可视区尺寸.网页全文尺寸.滚动距离 (实例)广告块高度动态居中.回到顶部   ...

  4. 加载window事件

    $(document).ready()和window.onload的区别 发表于 2012-08-29 由 admin 以浏览器装载文档为例,在页面加载完毕后,浏览器会通过JavaScript为DOM ...

  5. WPF中常用的Window事件

    官方链接:https://msdn.microsoft.com/en-us/library/system.windows.window.statechanged(v=vs.110).aspx 1. A ...

  6. angular4 使用window事件

    Angular使用window对象中的事件最好不要像使用jQuery那样使用 如下: 注:写事件直接绑定到window对象上了,组件销毁时这个事件没有解绑 可以使用剪头函数不用声明that 注:这样写 ...

  7. jquery自定义window事件

    <body> <a href='https://www.baidu.com/'>百度</a> </body> <script type=" ...

  8. window对象,BOM,window事件,延时器,DOM

    01.定时器补充 function fn(){    console.log(1);}setInterval("fn()",100);  //定时器调用匿名函数/*   funct ...

  9. js window事件解析(转载)

    js-window对象的方法和属性资料 hxpd 发表于 2007-05-08 21:58:18 熟练window对象的open.close.alert.confirm.prompt.setTimeo ...

随机推荐

  1. spark sql插入表时的文件个数研究

    spark sql执行insert overwrite table时,写到新表或者新分区的文件个数,有可能是200个,也有可能是任意个,为什么会有这种差别? 首先看一下spark sql执行inser ...

  2. WPF分析工具

    分析WPF程序是理解其行为很重要的一步,市场上有大量现成的WPF程序分析工具,如Snoop,WPFPerf,Perforator和Visual Profiler,其中Perforator和Visual ...

  3. 十九款web漏洞扫描工具

    1. Arachni Arachni是一款基于Ruby框架搭建的高性能安全扫描程序,适用于现代Web应用程序.可用于Mac.Windows及Linux系统的可移植二进制文件. Arachni不仅能对基 ...

  4. Docker容器(五)——Docker静态化IP

    (1).Docker的四种网络模式 Docker有以下四种模式,通过--net=[参数]选项(现在也可以使用--network [参数])指定: host模式:使用宿主机的IP地址和端口.使用--ne ...

  5. 【线段树】HDU 1166 敌兵布阵

    这道题目是线段树里面最基础的单点更新问题. 设计的知识点包括线段树的单点更新和区间查询. 题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1166 G++ ...

  6. 正则表达式\s空格,\d数字,量词+*?测试

    之前的博文中: 有正则表达式的\b.i.\g,本文再测试了空格数字和量词的匹配.这篇只测试匹配,不替换或其他处理.\s空格:测试实际写空格也能识别,但是不利于看出空了几个空格,可以用\s代表空格.\d ...

  7. 【CSS3练习】在圆上旋转的菜单

    先上效果图:就是用js计算每个小圆的位置分布到大圆的边线上,然后在让大圆旋转起来. 线上查看地址:http://dtdxrk.github.io/game/css3-demo/diffuse.html ...

  8. 使用docker搭建FastDFS文件系统

    1.首先下载FastDFS文件系统的docker镜像 docker search fastdfs 2.使用docker镜像构建tracker容器(跟踪服务器,起到调度的作用): docker run ...

  9. vue el-table 自适应表格内容宽度

    由于表头和列是分开渲染的,通过el-table 设置fit属性,只能撑开表头,但是没有办法根据列的内容去适应宽度.网上找了一些使用根据表格内容计算表头宽度的文章,记个笔记. 代码逻辑是通过vue  的 ...

  10. 帮你培养类型思维TypeScript(一)

    前言:作为一名程序员,相信你已经熟练掌握了JavaScript语言,由于其应用领域非常的广泛,所以算得上是每一个程序员必须要掌握的语言.但是JavaScript自身的缺点,相信每一个程序员也是深有体会 ...