Window对象扩展

external,chrome,rea,Registry,test,speechSynthesis,caches,ondeviceorientationabsolute,localStorage,sessionStorage,webkitStorageInfo,indexedDB,webkitIndexedDB,ondeviceorientation,ondevicemotion,who,postMessage,blur,focus,close,onautocompleteerror,onautocomplete,onunhandledrejection,onrejectionhandled,applicationCache,performance,onunload,onstorage,onpopstate,onpageshow,onpagehide,ononline,onoffline,onmessage,onlanguagechange,onhashchange,onbeforeunload,onwaiting,onvolumechange,ontoggle,ontimeupdate,onsuspend,onsubmit,onstalled,onshow,onselect,onseeking,onseeked,onscroll,onresize,onreset,onratechange,onprogress,onplaying,onplay,onpause,onmousewheel,onmouseup,onmouseover,onmouseout,onmousemove,onmouseleave,onmouseenter,onmousedown,onloadstart,onloadedmetadata,onloadeddata,onload,onkeyup,onkeypress,onkeydown,oninvalid,oninput,onfocus,onerror,onended,onemptied,ondurationchange,ondrop,ondragstart,ondragover,ondragleave,ondragenter,ondragend,ondrag,ondblclick,oncuechange,oncontextmenu,onclose,onclick,onchange,oncanplaythrough,oncanplay,oncancel,onblur,onabort,isSecureContext,onwheel,onwebkittransitionend,onwebkitanimationstart,onwebkitanimationiteration,onwebkitanimationend,ontransitionend,onsearch,onanimationstart,onanimationiteration,onanimationend,styleMedia,defaultstatus,defaultStatus,screenTop,screenLeft,clientInformation,console,devicePixelRatio,outerHeight,outerWidth,screenY,screenX,pageYOffset,scrollY,pageXOffset,scrollX,innerHeight,innerWidth,screen,navigator,frameElement,parent,opener,top,length,frames,closed,status,toolbar,statusbar,scrollbars,personalbar,menubar,locationbar,history,location,name,document,self,window,stop,open,alert,confirm,prompt,print,requestAnimationFrame,cancelAnimationFrame,captureEvents,releaseEvents,getComputedStyle,matchMedia,moveTo,moveBy,resizeTo,resizeBy,getSelection,find,getMatchedCSSRules,webkitRequestAnimationFrame,webkitCancelAnimationFrame,webkitCancelRequestAnimationFrame,btoa,atob,setTimeout,clearTimeout,setInterval,clearInterval,createImageBitmap,requestIdleCallback,cancelIdleCallback,scroll,scrollTo,scrollBy,fetch,webkitRequestFileSystem,webkitResolveLocalFileSystemURL,openDatabase,TEMPORARY,PERSISTENT,addEventListener,removeEventListener,dispatchEvent

只读引用对象相关

localStorage

localStorage 属性允许你访问一个 local Storage 对象。localStorage 与 sessionStorage 相似。不同之处在于,存储在 localStorage 里面的数据没有过期时间(expiration time),而存储在 sessionStorage 里面的数据会在浏览器会话(browsing session)结束时被清除,即浏览器关闭时。

sessionStorage

sessionStorage 属性允许你访问一个 session Storage 对象。它与 localStorage 相似,不同之处在于 localStorage 里面存储的数据没有过期时间设置,而存储在 sessionStorage 里面的数据在页面会话结束时会被清除。页面会话在浏览器打开期间一直保持,并且重新加载或恢复页面仍会保持原来的页面会话。在新标签或窗口打开一个页面会初始化一个新的会话,这点和 session cookie 的运行方式不同。

Web Storage API介绍

applicationCache

applicationCache返回window中应用缓存对象的一个引用。开发者可以使用 Application Cache接口设定浏览器缓存的数据并使得数据离线有效。

处于离线状态时,及时用户点击刷新按钮,应用也能正常加载和工作。

使用应用缓存

performance

performance API用于精确度量、控制、增强浏览器的性能表现。这个API为测量网站性能,提供以前没有办法做到的精度。

Performance API

console

console对象是Javascript的原生对象,可以输出各种信息用来调试程序,而且还提供了很多额外的方法,供开发者调用。主要用途有两个:

console对象

matchMedia

matchMedia返回一个新的MediaQueryList对象,表示指定的媒体查询字符串解析后的结果。

if (window.matchMedia("(min-width: 400px)").matches) {
  /* the view port is at least 400 pixels wide */
} else {
  /* the view port is less than 400 pixels wide */
}

媒体查询接口

navigator

返回一个navigator对象的引用,可以用它来查询一些关于运行当前脚本的应用程序的相关信息。

window.navigator

document

Document接口代表在浏览器及服务器中加载任意web页面,也作为web页面内容的入口。

支持所有文档类型的属性和方法,根据文档的类型不同,对文档对象的操作的API也会不一样。

Document类型

history

history是一个只读属性,用来获取History对象的引用。

History对象提供了操作浏览器会话历史的相关接口。

History

history object

History对象

Location

location是一个只读属性,返回一个Location对象,包含文档当前地址的相关信息。

Location

其他属性及方法

external

可以在js中通过window.external.myfunc()来调用浏览器提供的外部方法myfunc。可以让网页内的js脚本中能调用C++代码。

在嵌入了浏览器的工程中,除了IE默认提供的外部方法之外,需要网页的脚本中能调用C++代码,要实现这种交互,就必须实现脚本扩展。实现脚本扩展就是在程序中实现一个IDispatch接口,通过CHtmlView类的OnGetExternal虚函数返回此接口指针,这样就可以在脚本中通过window.external.XXX(关键字window可以省略)来 引用接口暴露的方法或属性(XXX为方法或属性名)。

相关阅读:实现脚本扩展

tips:Firefox和Chrome也提供了external对象,例如都实现了opensearch的两个外部方法:AddSearchProviderisSearchProviderInstalled

chrome

chrome是浏览器提供的一个chrome对象,其中包括app、loadTimes和runtime等相关信息。

speechSynthesis

speechSynthesis()该方法返回一个语音合成对象,这是提供的语音合成功能的相关API。

cache

该只读属性返回与当前的起源相关的CacheStorage对象,允许使用者调用存储资源进行离线使用,并产生请求自定义的相应。

indexedDB

IDBEnvironment接口的IndexedDB属性为应用程序提供了异步访问索引数据库的功能。

var DBOpenRequest = self.indexedDB.open("toDoList");

postMessage

window.postMessage是一个用于安全的使用跨源通信的方法,通常在不同页面上的脚本只在这种情况下被允许互相访问,当且仅当他们的页面所处的位置使用相同的协议、端口和主机。

在正确使用的情况下,window.postMessage提供了一个受控的机制来安全地绕过这一限制,用法如下:

otherWindow.postMessage(message, targetOrigin);

defaultStatus

defaultStatus属性可设置或返回窗口状态栏中的默认文本。该属性可读可写。

window.defaultStatus=sometext

clientInformation

是一个Navigator对象,返回当前浏览器的一些信息。

devicePixelRadio

是一个只读属性,返回的是一个物理像素在当前显示的设备(垂直)上的一个独立像素的比例。

兼容性未知,不推荐使用

toolbar

返回工具栏对象,可以在window中进行切换是否可见。

statusbar

返回状态栏对象,可以在window中进行切换是否可见。

scrollbars

返回滚动条对象。

locationbar

返回地址栏对象。

menubar

返回菜单栏对象。

requestAnimationFrame

window.requestAnimationFrame()这个方法是用来在页面重绘之前,通知浏览器调用一个指定的函数,以满足开发者操作动画的需求。

该方法接收一个函数作为参数,在重绘前进行调用。

requestID = window.requestAnimationFrame(callback);               // Firefox 23 / IE10 / Chrome / Safari 7 (incl. iOS)

该函数返回值requestID是一个长整形非零值,作为一个唯一标识符,可以用window.cancelAnimationFrame来取消这个回调函数。

captureEvents

注册窗口捕捉到的指定类型的所有事件。

事件种类包括以下取值:Event.ABORT, Event.BLUR, Event.CLICK, Event.CHANGE, Event.DBLCLICK, Event.DRAGDDROP, Event.ERROR, Event.FOCUS, Event.KEYDOWN, Event.KEYPRESS, Event.KEYUP, Event.LOAD, Event.MOUSEDOWN, Event.MOUSEMOVE, Event.MOUSEOUT, Event.MOUSEOVER, Event.MOUSEUP, Event.MOVE, Event.RESET, Event.RESIZE, Event.SELECT, Event.SUBMIT, Event.UNLOAD.

function reg() {
  window.captureEvents(Event.CLICK);
  window.onclick = page_click;
}
reg();
function page_click() {
  alert('page click event detected!');
}

releaseEvent

释放从捕获的特定类型的事件的窗口,用法与captureEvents相同。

find

在页面中搜索制定的字符串。

window.find("字符串")

语法为: window.find(aString, aCaseSensitive, aBackwards, aWrapAround, aWholeWord, aSearchInFrames, aShowDialog);
其中:

返回值为一个布尔值,如果搜索到制定的字符串,则返回true,否则返回false。

createImageBitmap

createImageBitmap方法接收各种不同的图像源,并返回其解析为ImageBitmap的promise。 可选源被裁减为源自(SX,SY)与宽度SW和高度SH像素的矩形。

createImageBitmap(image, sx, sy, sw, sh[, options]).then(function(response) { ... });

requestIdleCallback

requestIdleCallback方法排队在一个浏览器的空闲期间被调用的函数。

var handle = window.requestIdleCallback(callback[, options])

返回值handle是一个无符号整形,可以用window.cancelIdleCallback方法取消。

fetch

fetch方法提供了能够用于操作一部分HTTP管道的javascript接口,例如requestsresponses,可以简单的异步的获取资源。

如发起一个fetch的异步请求:

var myImage = document.querySelector('img');

fetch('flowers.jpg')
.then(function(response) {
  return response.blob();
})
.then(function(myBlob) {
  var objectURL = URL.createObjectURL(myBlob);
  myImage.src = objectURL;
});

fetch API

webkitRequestFileSystem

文件系统API的接口LocalFileSystem让你访问沙盒文件系统。该方法分由Window和Worker对象来实现的。

var requestedBytes = 1024*1024*10; // 10MB

navigator.webkitPersistentStorage.requestQuota (
    requestedBytes, function(grantedBytes) {  
        window.requestFileSystem(PERSISTENT, grantedBytes, onInitFs, errorHandler);

    }, function(e) { console.log('Error', e); }
);