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. flutter DateTime日期&时间选择器

    import 'package:flutter/material.dart'; import 'package:intl/intl.dart'; import 'dart:async'; class ...

  2. Dart 自增++自减--和循环语句

    void main(){ /* ++ -- 表示自增 自减 1 在赋值运算里面 如果++ -- 写在前面 这时候先运算 再赋值,如果++ --写在后面 先赋值后运行运算 var a=10; var b ...

  3. ES6深入浅出-3 三个点运算 & 新版字符串-1.函数与对象的语法糖

    主要讲的内容 时间充裕的话就讲,模板字面量 默认参数值 首先讲es6之前,我们是怎么做的.例如我们要写一个求和的函数, 请两个参数的和,但是如果有的人就是穿一个参数呢? 那么b没有传值,b的值是多少呢 ...

  4. window.open post传参

    目录 前言 获取当前用户信息 使用window.open的两种方式 Get方式 Post方式 前言 我使用的场景是,点击弹窗,然后把我当前用户的消息传过去 获取当前用户信息 打开Chrome浏览器,在 ...

  5. mongodb多个条件查询in,日期查询,嵌套查询,统计集合总数等常用实例

    1. 多个条件查询in in db.inventory.find( { qty: { $in: [ 5, 15 ] } } ) 2. 日期查询 db.books.find({}) 查询时间大于6-,结 ...

  6. 删除pod后又重新创建pod发现还是访问原先的服务状态---解决

    因为做了数据持久化存储,需要删除数据目录下的数据才可以 参照: https://www.cnblogs.com/effortsing/p/10496391.html

  7. 《第一本Docker书》学习笔记——第3章 Docker入门

    3.1 确保Docker已经就绪 查看docker是否正常工作: sudo docker info 3.2 运行我们的第一个容器 现在,让我们尝试启动第一个Docker容器.我们可以使用docker ...

  8. swift 导入第三方库

    现在的项目也是做了几个,每个都会导入几个优秀的第三方…… 这里写下导入的步骤,方便查询:::: 1.手动导入 首先要知道,是需要文件,还是框架 比如 Alamofire.SnapKit,都需要导入框架 ...

  9. 基于TreeSoft实现mysql、oracle、sql server的数据同步

    一.为了解决数据同步汇聚,数据分发,数据转换,数据维护需求,TreeSoft推出了数据同步,数据处理等丰富功能 . TreeSoft作为中间传输载体负责连接各种数据源,为各种异构数据库之间架起沟通的桥 ...

  10. 2019年Java面试题基础系列228道(4)

    1.Java 中能创建 volatile 数组吗? 能,Java 中可以创建 volatile 类型数组,不过只是一个指向数组的引用,而不是整个数组.我的意思是,如果改变引用指向的数组,将会受到 vo ...