JS知识点回顾——window对象-五八三

window对象：一个包含DOM文档的窗口，表示浏览器窗口以及页面可见区域；也是一个全局对象，全局的变量、函数均是它的属性，比如alert、Math等等，它自身也是全局变量的一个属性

注意： window上没有this，this上有window

windwo.isSecureContext

返回一个布尔值，标识当前上下文是否安全，浏览器的一些功能只能在安全的执行上下文中执行

比如https协议的会返回true，是安全的；http协议的是不安全的，返回false

特殊的被认为安全的执行上下文：

http://127.0.0.1 http://localhost

http://*.localhost

file://url

screenX、screenY

screenX：浏览器左边界到操作系统桌面左边界的水平距离

screenY：浏览器顶部到操作系统桌面顶部的距离

open、opener

open：可以打开一个新空白窗口或者指定地址的新窗口，会返回子窗口的引用

语法：window.open(strUrl,strWindowName,[strWIndowFeatures])

<body>



  父窗口
  <button id="openW">打开一个窗口</button>
  <button id="closeW">关闭打开的窗口</button>
  <script>

    let windowC = null;
    openW.addEventListener("click",function() {
      windowC = window.open("./index.html")
    })
    closeW.addEventListener("click",function() {
      windowC.close()
    })
  </script>
</body>

opener：返回打开当前窗口的那个窗口的引用，例如：在 window A 中打开了 window B，B.opener 返回 A，如果是同源，可以直接调用A窗体的方法

窗体的可见性

作用：比如看广告的时候，切走了广告的倒计时就不走了；判断方法如下

方法一：focus+blur事件：窗口能被focus表示可见，否则表示不可见

window.addEventListener("focus",function() {
      console.log("window可见")
})

window.addEventListener("blur",function() {
      console.log("window不可见")
})

方法二：document.hidden：返回布尔，true表示隐藏，false表示可见

方法三：document.visibilityState：返回document的可见性，可以知道文档是在背后或不可见的隐藏标签页或者正在渲染，可用的值有visible、hidden、prerender

<script>
    console.log(document.visibilityState)
    document.addEventListener("visibilitychange", function(){
      console.log(document.visibilityState)
    })
</script>

window.devicePixeRatio

返回当前显示设备的物理像素分辨率与css像素分辨率之比

物理像素：设备能控制显示的最小单位，是设备屏幕上的像素点个数

逻辑像素：设备独立像素，css中的1px表示一个逻辑像素，屏幕上的物理像素和逻辑像素并不相等，一般物理像素大于逻辑像素，比值就是devicePixelRatio

iphone12物理分辨率11702352；逻辑分辨率390844；设备像素比就是1170/390=3

scroll

改变滚动条位置的方法：

1、设置scrollLeft、scrollTop、scroll、scrollTo、scrollBy、scrollInfoView

2、设置锚点，href=”#id”

window.matchMedia()

用于判定Document是否匹配媒体查询；可以用于监控一个document来判断它匹配了或者停止匹配了媒体查询

<body>



  <div>

    (min-width:600px)
    <span style="color:red" id="mq-value"></span>
  </div>
  <script>
    let mql = window.matchMedia('(min-width:600px)');
    document.querySelector('#mq-value').innerHTML = mql.matches;
    mql.addEventListener("change", function(){
      document.querySelector('#mq-value').innerHTML = mql.matches;
    })
  </script>
</body>

window.getSelection()

表示用户选中的文本范围或者光标的当前位置

<body>



  <div>

    我们都是好孩子，善良的孩子，认真学习的孩子
  </div>
  <div>
    好好学习，天天向上
  </div>
  <input type="text" value="正在好好学习">
  <div style="margin-top: 50px;">
    当前选中内容：
    <div id="selectedContent"></div>
  </div>
  <script>
    setInterval(() => {
      selectedContent.textContent = window.getSelection().toString()
    }, 2000);
  </script>
</body>

window.frameElement

返回嵌入当前window对象的元素，比如iframe、object，如果当前window对象是顶层窗口返回null；

比如index.html中嵌套了iframe，src为ifr1.html；在ifr.html中使用window.frameElement可以获取到iframe元素，比如可用修改window.frameElement的src为ifr2.html；这时index.html嵌套的就是ifr2.html

网络状态

属性是：navigator.onLine；也可以监听：

window.onoffline = function(){}
window.ononline = function(){}

window.print

打开打印对话框打印当前文档

设置打印样式，使用媒体查询；使用媒体查询的四种方式

// 方法一

@media print {
    .div {
        font-size:18px;
    }
}

// 方法二
<style media="print">
    .div {
        font-size:18px;
    }

<style/>

// 方法三
<link rel="stylesheet" href="" media="print">

// 方法四
@import  url("")  print;

打印局部内容的方式：通过媒体查询在打印时隐藏不想打印的内容

窗口（包含iframe）间的通信

了解同源策略：协议、域名、端口相同；host包含端口号；hostname只返回域名；没有端口号的URL，host和hostname表象一样

方法一：定时器+客户端存储；本地存储storage（localStorage/sessionStorage）+本地轮询setInterval

缺点：不够及时，因为使用的定时器、受同源策略的限制

方法二：postMessage：不受同源策略的限制；但是必须拿到对应窗口的引用（contentWindow）

方法三：storageEvent：当前页面使用的storage被其他页面修改时会触发StorageEvent事件；本质也是localStorage/sessionStorage

window.addEventListener("storage",function(ev) {
      console.log(ev)
})

缺点：

1、传递的数据大小有限制（storage最多只能存储5M）

2、可能需要进行清理工作

3、受同源策略限制

4、同窗口不能监听，解决方法是手动拦截并派发事件实现同窗口监听

const oriSetItem = localStorage.setItem;
    Object.defineProperty(localStorage.__proto__,'setItem',{
      value:function(key,value){
        const oldValue = localStorage.getItem(key);
        const event = new StorageEvent('storage',{
          key,
          newValue:value,
          oldValue,
          url:document.URL,
          storageArea:localStorage
        })
        window.dispatchEvent(event);
        oriSetItem.apply(this,arguments)
      }
})

方法四：Broadcast Channel：允许同源的不同浏览器窗口、Tab页签、iframe之间的通信；但是也受同源策略的影响

//page1
const channel = new BroadcastChannel("channel11");
channel.postMessage("Hello world!");
// page2
const channel = new BroadcastChannel("channel11");
channnel1.addEventListener("message",function (params) {
      console.log(params)
})

方法五：MessageChannel：先创建一个消息通道，通过MessagePort属性发送数据，MessageChannel中提供两个port，通过port传递消息；缺点是先通过postMessage建立联系

// 主窗口
const channel = new MessageChannel();
const ifr = document.querySelector('iframe');
const ifrWindow = ifr.contentWindow;
ifr.addEventListener("load",function () {
      ifrWindow.postMessage("open", "*", [channel.port2])
})
channel.port1.onmessage = function(e){
      console.log(e.data)
}

// iframe
window.addEventListener("message",function(e){
      if(e.data === "open"){
        e.port1.onmessage = function(e){
          console.log(e.data)
        }
        e.port1.postMessage("开始发送消息")
      }
})

location对象

location.origin属性是只读的；不用操作整个href也是可以改变地址的，可以只改变地址的某一部分；除hash其他属性修改会以新的URL重新加载页面，也会在浏览器生成一条新的历史记录

window.location.protocol = "https";
window.location.host = "127.2.2.1:5500";
window.location.hostname = "127.2.2.1";
window.location.port = "5500";
window.location.pathname = "test/path";
window.location.search = "wd=ff";
window.location.hash = "/home";
window.location.href = "http://127.2.2.1:5500/test.html";

修改pathname可以不用传/

修改search可以不用传?

修改hash可以不用传#

访问location对象的方式

window.location、window.document.location 、document.location、location（不推荐）

刷新页面

window.location.reload：重新加载当前文档

参数：

false或者不传，浏览器可能从缓存中读取页面
true，强制从服务器重新下载文档，谷歌好像不生效

改变地址栏

href是属性，可以直接修改，会增加历史记录

assign是方法，修改地址栏地址，会增加历史记录

replace也是方法，替换地址栏地址，不会增加历史记录

监听hash

// 方法一

window.onhashchange = function (e) {
      console.log(e)
}


// 方法二
// 推荐，不会影响别人的hash监听事件，addEventListener会响应多次
window.addEventListener("hashchange",function(e) {
      console.log(e.oldURL)
},false) 

// 方法三
<body onhashchange="fun()"

URL对象

对象上的属性以及方法

searchParams：只读，访问search中各个查询参数
createObjectURL()：创建一个唯一的blob链接
revokeObjectIRL()：销毁createObjectURL()创建的实例

使用URL动态执行脚本

<button id="btn">执行脚本</button>
  <script>
    const js = `(function(){
      console.log(location.href)
    })()`
    btn.onclick = function(){
      const scriptContent = js;
      const scriptEl = document.createElement('script');
      const scriptSrc = URL.createObjectURL(new Blob([scriptContent]))
      scriptEl.src = scriptSrc;
      document.body.appendChild(scriptEl)
    }

  </script>

url编码

encodeURI，encodeURIComponent；都是编码URL，唯一的区别在于编码的字符范围不同；如果要编码整个URL，使用encodeURI；如果只编码URL中的参数，使用encodeURIComponent

encodeURIComponent不转义字符：A-Za-z0-9 – _ . ! ~ * ‘ ( )

encodeURI不转义字符：A-Za-z0-9 ; , / ? : @ & = + $ – _ . ! ~ * ‘ ( ) #

navigator对象

navigator.userAgent

当前浏览器的用户代理字符串；第三方库ua-parser-js可以识别各类浏览器，也是通过解析userAgent

识别是否是微信内置浏览器

function isWx() {
      const ua = window.navigator.userAgent.toLowerCase();
      return ua.match(/MicroMessenger/i) === "micromessenger"
}

navigator.onLine

返回在线状态，true或false；通过document.ononline和document.onoffline监听网络变化

navigator.clipboard

返回剪切板对象；必须是安全的上下文（local、https、wss）使用window.isSecureContext检测安全上下文；并且需要人为触发

<button id="btn">复制内容</button>
  <script>
    function copyTpClipboard(text) {
      if(navigator.clipboard && window.isSecureContext){
        return navigator.clipboard.writeText(text)
      }else {
        console.log("使用其他方式复制")
      }
    }
    btn.onclick = function () {
      copyTpClipboard("需要拷贝的内容").then(()=>{
          console.log("复制成功")
      })
    }
</script>

navigator.serviceWorker

返回关联文件的ServiceWorkerContainer对象，提供对ServiceWorker的注册、删除、升级和通信访问；也是需要在安全的上下文中才能执行

应用场景：

1、后台数据同步

2、集中处理计算成本高的数据更新

3、性能增强，用于预获取用户所需资源（离线访问）

navigator.mediaDevices

返回一个MediaDevice对象，用户可获取媒体信息设备；应用场景：H5调用摄像头识别二维码，共享屏幕等

<body>



  <video id="video" autoplay style="height: 500px;width: 500px;"></video>
  <button id="start">共享屏幕</button>
  <button id="stop">停止共享</button>
  <script>

    const mediaOptions = {
      video:{
        cursor:"always"
      },
      audio:false
    }
    let videoEl = document.getElementById("video");
    document.getElementById("start").addEventListener("click",function(){
      startShareScreen();
    })
    document.getElementById("stop").addEventListener("click",function(){
      stopShareScreen();
    })
    async function startShareScreen(){
      try {
        videoEl.srcObject = await navigator.mediaDevices.getDisplayMedia(mediaOptions)
      } catch (e) {
        console.log("报错啦")
      }
    }
    function stopShareScreen(e) {
      let tracks = videoEl.srcObject.getTracks();
      tracks.forEach(track => {
        track.stop()
      });
      videoEl.srcObject = null;
    }
  </script>
</body>

navigator.storage

返回StorageManager对象，用于访问浏览器的整体存储能力；也是需要安全的上下文中执行

应用：获取storage的存储大小以及可分配大小

navigator.storage.estimate().then(function(e){console.log(e)})

navigator.sendBeacon

上报数据，通过httpPost将少量的数据异步传输到web服务器；在关闭窗口的时候ajax可能发送不成功，sendBeacon可以

应用：主要用于将统计数据发送到web服务器，避免传统技术发送分析数据的一些问题；比XMLHttpRequest更加稳定可靠

navigator.sendBeacon(href,data)

navigator.connection

返回一个对象，包含网络信息；可以获取当前用户的宽带信息

navigator.permissions

返回一个对象，获取权限信息

document.getElementById("btn").addEventListener("click",function(){
      navigator.permissions.query({name:"geolocation"}).then((res)=>{
          console.log(res)
      })
})

navigator.mediaSession

返回一个对象，用来与浏览器共享媒体信息，比如播放状态、标题、封面等

history对象

本质是一个栈，最多不能超过50个，超过会将最开始访问的推出栈然后再新增

back：会话历史记录中的向后移动一页，如果没有上一页不执行任何操作

forward：会话历史记录中向前移动一页，如果没有下一页不执行任何操作

length：返回当前会话中的历史页面数，包含当前页面在内，对于一个新开的tab加载页面当前属性返回1

go：在会话历史中向前或者向后移动指定页数，负数表示向后移动，正值表示向前移动，如果传入0或者没有传参数则与调用location.reload()效果相同；如果需要移动的页数大于已有的页数则不会移动

history.pushState

向当前浏览器会话的历史堆栈中添加一个状态；语法：history.pushState(state,title[,url])

会增加历史访问记录（即使url为空），但不会改变页面的内容；新url必须和当前url同源

history.replaceState

修改当前历史记录状态；语法：history.replace(state,title[,url])

是替换浏览器记录栈顶部的记录，不会增加栈的深度；新url必须和当前url同源

history.state

返回在会话栈顶的状态值的拷贝

window.onpopstate

当活动历史记录条目更改时，将触发该事件；调用pushState和replaceState的时候不会触发该事件；只有调用前进后退时才会触发；a标签的锚点也会触发该事件

注意： history.pushState刷新的时候需要服务端配合；不管访问的地址是啥都返回同一份index.html；这也是路由中使用history模式，需要服务端配合的原因

写个简单的路由

功能分析

监听url变化，根据变化加载不同的组件；但是调用pushState和replaceState的时候不会触发popstate事件

1、重写history.pushState

const oriPushState = history.pushState;
   history.pushState = function (state,title,url) {
    oriPushState.apply(history,[state,title,url]);
    const event = new CustomEvent("c-popstate",{
     detail:{state,title,url}
    })
    window.dispatchEvent(event)
}

2、点击的标签组件c-link；pushState更新访问历史记录

// <c-link to="/" class="c-link">首页</c-link>
class CustomLink extends HTMLElement {
      connectedCallback() {
        this.addEventListener("click",ev=>{
          ev.preventDefault();
          const to = this.getAttribute("to")
          // 更新浏览器历史记录
          history.pushState("","",to)
        })
      }
}
window.customElements.define("c-link",CustomLink);

3、c-route：提供配置信息，对外提供getData方法

class CustomRoute extends HTMLElement {
    #data = null;
    getData(){
     return {
      default:this.hasAttribute("default"),
      path:this.getAttribute("path"),
      component:this.getAttribute("component")
     }
    }
}

window.customElements.define("c-route",CustomRoute);

4、c-component：动态加载远程的html，并解析

async function loadComponent(path,name){
    this.caches = this.caches || {};
    // 如果缓存存在直接返回
    if(!!this.caches[path]){
     return this.caches[path]
    }
    const res = await fetch(path).then(res=>res.text());
    const parser = new DOMParser();
    const doc = parser.parseFromString(res,"text/html");
    this.caches[path] = {
     template:doc.querySelector("template"),
     script:doc.querySelector("script"),
     style:doc.querySelector("style")
    }
    return this.caches[path]
}
class CustomComponent extends HTMLElement {
    async connectedCallback(){
     const strPath = this.getAttribute("path");
     const cInfos = await loadComponent(strPath);
     const shadow = this.attachShadow({mode:"closed"})
     this.#addElements(shadow,cInfos)
    }
    #addElements(shadow,info){
         // 添加模板
         if(info.template){
          shadow.appendChild(info.template.content.cloneNode(true))
         }
         if(info.script){
          const fun = new Function(`${info.script.textContent}`);
          // 绑定脚本的this为当前的影子根节点，放在全局污染
          fun.bind(shadow)();
         }
         if(info.style){
          shadow.appendChild(info.style)
         }
    }
}
window.customElements.define("c-component",CustomComponent);

5、c-router：收集路由信息，监听路由信息变化，然后加载对应的组件

class CustomRouter extends HTMLElement {
    #routes
    connectedCallback(){
     const routeNodes = this.querySelectorAll('c-route');
     this.#routes = Array.from(routeNodes).map(node=>node.getData());
     const defaultRoute = this.#routes.find(r=>r.default) || this.#routes[0];
     // 渲染对应路由
     this.#onRenderRoute(defaultRoute);
     // 监听路由变化
     this.#listenerHistory();
    }
    #onRenderRoute(route){
     const el = document.createElement("c-component");
     el.setAttribute("path",`/${route.component}.html`);
     el.id = "__route__";
     this.append(el);
    }
    #onUnloadRoute(){
     this.removeChild(this.querySelector("#__route__"));
    }
    #listenerHistory() {
     window.addEventListener("popstate",function(ev) {
      const route = this.#getRoute(this.#routes,location.pathname);
      this.#onUnloadRoute();
      this.#onRenderRoute(route);
     })
     window.addEventListener("c-popstate",function(ev) {
      const detail = ev.detail;
      const route = this.#getRoute(this.#routes,location.pathname);
      this.#onUnloadRoute();
      this.#onRenderRoute(route);
     });
    }
    #getRoute(routes,url){
     return routes.find(function(r) {
      const path = r.path;
      const strPaths = path.split("/");
      const strUrlPaths = url.split("/");
      let match = true;
      for(let i=0;i<strPaths.length;i++){
        if(strPaths[i].startsWith(":")){
         continue;
        }
        match = strPaths[i] === strUrlPaths[i];
        if(!match){
         break;
        }
      }
      return match;
     })
    }
}
window.customElements.define("c-router",CustomRouter);

文章版权归作者所有，未经允许请勿转载，侵权请联系 admin@trc20.tw 删除。

THE END

# 前端 # JavaScript