浏览器中好用的新 Web API

持续更新浏览器中有特色、实验性、好用的 Web API，以备不时之需。

一、VisualViewport

Visual Viewport API 提供了当前页面的视觉视口接口，即 VisualViewport 。对于每个页面容器来说（如 iframe），都存在有一个独立的 window 对象。每个页面容器的 window 对象都有一个独立的 VisualViewport 属性。

例：

var bottomBar = document.getElementById('bottombar');
var viewport = window.visualViewport;

function resizeHandler() {
   if (viewport.scale > 1.3)
     bottomBar.style.display = "none";
   else
     bottomBar.style.display = "block";
}

window.visualViewport.addEventListener('resize', resizeHandler);

参考地址：https://developer.mozilla.org/zh-CN/docs/Web/API/VisualViewport

二、getSelection

Window.getSelection 返回一个 Selection 对象，表示用户选择的文本范围或光标的当前位置。

例：

function foo() {
    let selObj = window.getSelection();
    console.log(selObj);
    let selRange = selObj.getRangeAt(0);
    // 其他代码
}
function fn() {
  let selObj = window.getSelection();
  alert(selObj.toString());
}

---

欢迎访问：天问博客

本文作者： Tiven
发布时间： 2023-01-24
最后更新： 2024-01-12
本文标题： 浏览器中好用的新 Web API
本文链接： https://www.tiven.cn/p/22715997/
版权声明： 本作品采用 CC BY-NC-SA 4.0 许可协议进行许可。转载请注明出处！