BOM 浏览器对象模型_window 对象的常见 window.属性_window.方法

时间  2019-11-08
标签 bom 浏览器 对象 模型 window 常见 属性 方法 栏目 浏览器 繁體版
原文   原文链接

1. 经常使用属性javascript

  • window.devicePixelRatio        像素比 = css / 物理像素
  • window.scrollX，window.scrollY    滚动条 卷曲距离
  • if (window.scrollY < 75) { window.scroll(0, 75); }

获取浏览器组件对象css

  • window.locationbar        地址栏对象
  • window.menubar        菜单栏对象
  • window.scrollbars        窗口的滚动条对象
  • window.toolbar        工具栏对象
  • window.statusbar        状态栏对象
  • window.personalbar        用户安装的我的工具栏对象

全局对象属性html

  • window.document        指向 document 对象。注意，这个属性有同源限制。只有来自同源的脚本才能读取这个属性。
  • window.location        指向 Location 对象，用于获取当前窗口的 URL 信息。它等同于 document.location 属性
  • window.navigator        指向 Navigator 对象，用于获取环境信息
  • window.history        指向 History 对象，表示浏览器的浏览历史
  • window.localStorage        指向本地储存的 localStorage 数据
  • window.sessionStorage        指向本地储存的 sessionStorage 数据
  • window.console        指向 console 对象，用于操做控制台
  • window.screen        指向 Screen 对象，表示屏幕信息
  • window.isSecureContext 属性返回一个布尔值，表示当前窗口是否处在加密环境。

若是是 HTTPS 协议，就是 true，不然就是 falsejava

弹出不一样的对话框浏览器

  • window.alert()

只有一个“肯定”按钮，每每用来通知用户某些信息session

对话框弹出期间，浏览器窗口处于冻结状态，若是不点“肯定”按钮，用户什么也干不了框架

参数只能是字符串，无法使用 CSS 样式，可是能够用\n指定换行函数

  • window.prompt()

弹出的对话框，提示文字的下方，还有一个输入框，要求用户输入信息，并有“肯定”和“取消”两个按钮。工具

它每每用来获取用户输入的数据
oop

  • window.confirm()

弹出的对话框，除了提示信息以外，只有“肯定”和“取消”两个按钮，每每用来征询用户是否赞成

  • window.onunload = function () { return window.confirm('你肯定要离开当面页面吗？'); };

2. 经常使用方法

window.open()

新建另外一个浏览器窗口，相似于浏览器菜单的新建窗口选项。

它会返回新窗口的引用，若是没法新建窗口，则返回 null

  • var popup = window.open('somefile.html');

有 3 个参数

  • url        字符串，表示新窗口的网址。

若是省略，默认网址就是 about:blank。

  • windowName        字符串，表示新窗口的名字

若是该名字的窗口已经存在，则占用该窗口，再也不新建窗口。

若是省略，就默认使用_blank，表示新建一个没有名字的窗口。

另外还有几个预设值，_self表示当前窗口，_top表示顶层窗口，_parent表示上一层窗口。

  • windowFeatures        字符串，内容为逗号分隔的键值对（详见下文），表示新窗口的参数

好比有没有提示栏、工具条等等。

若是省略，则默认打开一个完整 UI 的新窗口。

若是新建的是一个已经存在的窗口，则该参数不起做用，浏览器沿用之前窗口的参数。

left        新窗口距离屏幕最左边的距离（单位像素）。

注意，新窗口必须是可见的，不能设置在屏幕之外的位置。

top        新窗口距离屏幕最顶部的距离（单位像素）。
height        新窗口内容区域的高度（单位像素），不得小于100。
width        新窗口内容区域的宽度（单位像素），不得小于100。
outerHeight        整个浏览器窗口的高度（单位像素），不得小于100。
outerWidth        整个浏览器窗口的宽度（单位像素），不得小于100。
menubar        是否显示菜单栏。
toolbar        是否显示工具栏。
location        是否显示地址栏。
personalbar        是否显示用户本身安装的工具栏。
status        是否显示状态栏。
dependent        是否依赖父窗口。

若是依赖，那么父窗口最小化，该窗口也最小化；父窗口关闭，该窗口也关闭。

minimizable        是否有最小化按钮，前提是dialog=yes。
noopener        新窗口将与父窗口切断联系，

即新窗口的window.opener属性返回null，父窗口的window.open()方法也返回null。

resizable        新窗口是否能够调节大小。
scrollbars        是否容许新窗口出现滚动条。
dialog        新窗口标题栏是否出现最大化、最小化、恢复原始大小的控件。
titlebar        新窗口是否显示标题栏。
alwaysRaised        是否显示在全部窗口的顶部。
alwaysLowered        否显示在父窗口的底下。
close        新窗口是否显示关闭按钮

  • var popup = window.open( 'somepage.html', 'DefinitionsWindows', 'height=200,width=200,location=no,status=yes,resizable=yes,scrollbars=yes' );

    打开的新窗口高度和宽度都为 200  像素，没有地址栏和滚动条，但有状态栏，容许用户调整大小

  • 注意，若是新窗口和父窗口不是同源的（即不在同一个域），它们彼此不能获取对方窗口对象的内部属性
  • var w = window.open(); console.log('已经打开新窗口'); w.location = 'http://example.com';

    if (popup === null) {
    // 新建窗口失败
    }

  • window.close()

通常只用来关闭 window.open() 方法新建的窗口

对顶层窗口有效，iframe 框架之中的窗口使用该方法无效

  • window.stop()

彻底等同于单击浏览器的中止按钮，会中止加载图像、视频等正在或等待加载的对象

  • window.moveTo()

移动浏览器窗口到指定位置。

接受两个参数，分别是窗口左上角 距离 屏幕左上角的 水平距离 和 垂直距离 ，单位为像素

  • window.moveTo(100, 200);
  • window.moveBy()

将窗口移动到一个相对位置。

它接受两个参数，分别是相对于窗口左上角向右移动的水平距离 和 向下移动的垂直距离，单位为像素

注意，仅如下状况有效：

该窗口是用 window.open() 方法新建的，而且它所在的 Tab 页是当前窗口里面惟一的

  • window.resizeTo()

缩放窗口到指定大小

接受两个参数：

第一个是缩放后的窗口宽度（outerWidth 属性，包含滚动条、标题栏等等）

第二个是缩放后的窗口高度（outerHeight 属性）

  • 将当前窗口缩放到，屏幕可用区域的一半宽度和高度
  • window.resizeTo( window.screen.availWidth / 2, window.screen.availHeight / 2 );
  • window.resizeBy()

用于 按照相对自己的量缩放 窗口

接受两个参数，第一个是水平缩放的量，第二个是垂直缩放的量，单位都是像素

  • window.resizeBy(-200, -200);

    将当前窗口的宽度和高度，都缩小 200 像素

  • window.scrollTo()    /    window.scroll()

将文档滚动到指定位置。

接受两个参数，也能够接受一个配置对象做为参数，表示 滚动后 相对于窗口左上角的页面坐标。

  • window.scrollTo({ top: 1000, behavior: 'smooth' });

top        滚动后页面左上角的垂直坐标，即 y 坐标。
left        滚动后页面左上角的水平坐标，即 x 坐标。
behavior        字符串，表示滚动的方式，有三个可能值（smooth、instant、auto），默认值为 auto。

  • window.scrollBy()

将网页 相对当前位置 滚动指定距离（单位像素）。

接受两个参数：水平向右滚动的像素，垂直向下滚动的像素

  • 将网页向下滚动一屏
  • window.scrollBy(0, window.innerHeight);

注意：

若是不是滚动网页，而是滚动某个元素

  • Element.scrollTop
  • Element.scrollLeft
  • Element.scrollIntoView()
  • window.print()

会跳出打印对话框，与用户点击菜单里面的“打印”命令效果相同

  • document.getElementById('printLink').onclick = function () { if (typeof window.print === 'function') { // 支持打印功能
 window.print(); }; };
  • window.focus()

激活窗口，使其得到焦点，出如今其余窗口的前面

  • 先检查popup窗口是否依然存在，确认后激活该窗口
  • var popup = window.open('popup.html', 'Popup Window'); if ((popup !== null) && !popup.closed) { popup.focus(); };
  • window.blur()

将焦点从窗口移除

当前窗口得到焦点时，会触发focus事件；

当前窗口失去焦点时，会触发blur事件

  • window.getSelection()

返回一个 Selection 对象，表示用户如今选中的文本

  • var selObj = window.getSelection();
    var theSel = selObj.toString();
  • window.getComputedStyle()

接受一个元素节点做为参数，返回一个包含该元素的最终样式信息的对象

  • window.matchMedia()

检查 CSS 的 mediaQuery 语句

  • window.requestAnimationFrame()

跟 setTimeout() 相似，都是推迟某个函数的执行。

不一样之处在于：

setTimeout()

必须指定推迟的时间，

window.requestAnimationFrame()

则是推迟到浏览器下一次重流时执行，该函数执行完才会进行下一次重绘。

重绘一般是 16ms 执行一次，不过浏览器会自动调节这个速率，

好比网页切换到后台 Tab 页时，requestAnimationFrame() 会暂停执行。

若是某个函数会改变网页的布局，通常就放在 window.requestAnimationFrame() 里面执行

这样能够节省系统资源，使得网页效果更加平滑。

由于慢速设备会用较慢的速率重流和重绘，而速度更快的设备会有更快的速率

接受一个回调函数做为参数

  • window.requestAnimationFrame(callback);

    callback是一个回调函数。

  • callback 执行时，它的参数就是

系统传入的一个高精度时间戳（performance.now() 的返回值），单位是毫秒，表示距离网页加载的时间。

  • window.requestAnimationFrame() 的返回值是一个整数，
  • 这个返回值整数能够传入 window.cancelAnimationFrame()，用来取消回调函数的执行
  • window.requestAnimationFrame()执行网页动画的例子
  • var element = document.getElementById('animate'); element.style.position = 'absolute'; var start = null; function step(timestamp) { if (!start){ start = timestamp; }; var progress = timestamp - start; // 元素不断向左移，最大不超过200像素
    element.style.left = Math.min(progress / 10, 200) + 'px'; // 若是距离第一次执行不超过 2000 毫秒，
    // 就继续执行动画
    if (progress < 2000) { window.requestAnimationFrame(step); }; }; window.requestAnimationFrame(step);
  • 实例

index.html

  • <!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>requestAnimationFrame</title>
        
        <link rel="stylesheet" type="text/css" href="./css/index.css" />
    </head>
    
    <body>
        
        <div id="test_box" class="clearfix">
            
        </div>
        
        <!-- javascript 代码 -->
        <script type="text/javascript" src="./js/index.js"></script>
    </body>
</html>

index.css

  • body { width: 100%; color: #000; background: #96b377; font: 14px Helvetica, Arial, sans-serif; } #test_box { width: 100px; height: 100px; background-color: red; }

index.js

  • window.addEventListener("DOMContentLoaded", function(){ var testBox = document.getElementById("test_box"); /**** requestAnimationFrame ****/
    var element = testBox; element.style.position = 'absolute'; var start = null; var offset = 0; var speed = 5; function step(timestamp) { if (!start){ start = timestamp; }; var progress = (timestamp - start)/speed;
        endPos = 500; // 元素不断向左移，最大不超过200像素
        offset = progress; if(parseInt(progress/endPos)%2 == 0){
            offset = progress%endPos; }else{ offset = endPos - progress%endPos; }; element.style.left = offset%endPos + 'px'; // 若是距离第一次执行不超过 2000 毫秒，
        // 就继续执行动画
        //if (progress < 2000) {
 window.requestAnimationFrame(step); //};
 }; window.requestAnimationFrame(step); }, false);

判断当前窗口是否是顶级窗口

window.top === window.self

访问历史后退一次

window.history.back();

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程