标签: Web

IntersectionObserver

作用：

IntersectionObserver 用来监听一个元素是否进入（或离开）另一个元素的可视区域（Viewport 或自定义容器）。

优势：

浏览器会在 主线程之外 的渲染管线中（通常是合成线程或专用 IntersectionObserver 任务队列）去检测可见性。
不会触发强制同步回流 (Reflow / Layout)，IntersectionObserver 的检测通常发生在 布局之后、合成之前

Garlen2025/11/5大约 3 分钟

 if (navigator.geolocation)
    {
       navigator.geolocation.getCurrentPosition(function(position) {
            console.log(position.coords.latitude);
            console.log(position.coords.longitude);

          }, (e)=>{
            console.error(e);
          });
    }
    else
    {
        console.log("该浏览器不支持获取地理位置。");
    }

Garlen2024/6/20大约 3 分钟

浅识Content-Disposition

记录WX小程序打开H5附件pdf下载链接的问题

现象：
小程序复用H5，打开下载链接的web-view，内容为一片乱码

原因：

在web端，后端接口提供的附件下载链接中，一般配置好了文件响应的Content-type指定了文件的类型。这里点击链接后，分了两种场景。

浏览打开新标签页，并下载。
浏览打开新标签页，并在线预览。

通过查看响应配置可知:

第一种下载的情况，可以看到

Garlen2024/5/6大约 2 分钟

初识SSE--通过破解文心一言F12防调试

背景

初次使用国内ai的时候好奇想看看他们接口，发现控制台被ban了。于是研究了一下实现。

实现前端js防止调试

首先是模拟文心一言前端防调试的方法。

  document.onkeydown = function (e) {
    if (e.keyCode === 123) {
      return false;
    }
  };
  document.oncontextmenu = function () {
    return false;
  };
  (() => {
    function ban(params) {
      let currentTime = new Date().getTime()
      let timer = setInterval(() => {
        (new Function("debugger"))()//这里启动新js文件
        let date = new Date().getTime()
        if (date - currentTime > 110) {
          clearInterval(timer)
          console.warn('opened dev');
          document.body.innerHTML = "禁止调试"
          window.location.href = "about:blank"
        } else {
          currentTime = date
        }
      }, 50)
    }
    try {
      ban()
    } catch (error) {

    }
  }
  )()

Garlen2023/4/15大约 4 分钟

前端文件下载

如何处理 Fecth API 从后端获取的字节数据？
URL.createObjectURL() 做了什么？
“res.blob()” 做了什么？

1.Fecth API 请求的Response 对象中的 blob（）方法，将字节属性转换为blob对象的Promise。

Blob 对象表示一个不可变、原始数据的类文件对象。保存从后端获取的原始数据。

2.通过这个blob对象，每次调用 URL.createObjectURL() 方法都会生成一个地址，这个地址代表着根据 blob 对象生成的资源入口，而这个资源入口存放于浏览器维护的一个 blob URL store 中。生成的 URL 由四部分组成：

Garlen2022/12/29大约 2 分钟