SvelteKit中如何检测window对象何时可用？

嘿，刚接触SvelteKit的话，确实会被SSR和window的问题搞懵，我来给你掰扯清楚～

首先得明白：SvelteKit默认会做服务端渲染（SSR），服务端那边根本没有window这个东西——毕竟服务端只是生成HTML，没有浏览器环境嘛。所以你要是在组件顶层直接写window相关代码，服务端渲染的时候肯定会报错。

下面给你两种最靠谱的检测方式，保证能安全拿到window：

1. 用onMount生命周期钩子 #

这是最常用的方案，因为onMount是Svelte专门设计的、只在客户端组件挂载完成后才会执行的钩子，里面的代码100%处于浏览器环境，直接用window完全没问题。

比如你的getRem函数，就可以这么写：

<script lang="ts">
  import { onMount } from 'svelte';

  const getRem = () => {
    const docEl = window.document.documentElement;
    const rem = docEl.clientWidth / 10;
    docEl.style.fontSize = `${rem}px`;
  };

  onMount(() => {
    // 这里放心调用getRem，window已经妥妥可用了
    getRem();
    // 要是需要监听窗口大小变化，也可以在这里加监听
    window.addEventListener('resize', getRem);
    
    // 记得组件销毁时移除监听，避免内存泄漏
    return () => {
      window.removeEventListener('resize', getRem);
    };
  });
</script>

2. 用SvelteKit内置的browser变量 #

SvelteKit给我们提供了一个超级方便的环境判断变量browser，它会自动帮你区分当前是在服务端还是客户端：服务端时它是false，客户端时是true。

用法也很简单：

<script lang="ts">
  import { browser } from '$app/environment';

  let remValue = 0;

  if (browser) {
    // 进到这里就说明是在客户端，window肯定存在
    const docEl = window.document.documentElement;
    remValue = docEl.clientWidth / 10;
    docEl.style.fontSize = `${remValue}px`;
  }
</script>

小提醒 #

千万别在组件的顶层作用域直接写window相关代码哦！比如下面这种写法就会在SSR时报错：

<script lang="ts">
  // 错误写法！服务端渲染时会找不到window
  const docEl = window.document.documentElement;
</script>

必须把访问window的代码用上面两种方法包裹起来，才能避免服务端的报错问题～

备注：内容来源于stack exchange，提问作者Donald Zhu