如何在Docusaurus站点页面加载时调用自定义JS函数？

你之前尝试的问题点 #

• 尝试2里的<BrowserOnly>是React组件，仅能在JSX文件中使用，不能放在纯JS文件里；通过docusaurus.config.js的scripts配置加载的是纯JS文件，无法识别JSX语法，所以代码不会生效。
• 尝试1的SSR报错，是因为直接在组件中写了仅能在浏览器运行的代码，没有做环境判断。

方法一：单个页面执行（用BrowserOnly组件） #

修改你的src/components/HomepageFeatures/index.js，用正确的方式使用BrowserOnly：

import React, { useEffect } from 'react';
import BrowserOnly from '@docusaurus/BrowserOnly';

export default function HomepageFeatures() {
  return (
    <>
      <BrowserOnly>
        {() => {
          useEffect(() => {
            // 页面加载完成后执行自定义逻辑
            alert("Welcome!");
            // 调用你的自定义函数，比如myCustomFunction()
          }, []);
          return null; // 无需渲染内容时返回null即可
        }}
      </BrowserOnly>
      {/* 原组件的其他内容 */}
    </>
  );
}

方法二：单个页面执行（用ExecutionEnvironment判断） #

如果不想用BrowserOnly，可以通过环境判断避免SSR报错：

import React, { useEffect } from 'react';
import ExecutionEnvironment from '@docusaurus/ExecutionEnvironment';

export default function HomepageFeatures() {
  useEffect(() => {
    if (ExecutionEnvironment.canUseDOM) {
      // 仅在浏览器环境执行代码
      alert("Welcome!");
    }
  }, []);

  return (
    {/* 原组件内容 */}
  );
}

方法三：全局所有页面执行 #

如果要在所有页面加载时执行代码，直接创建src/client/index.js文件（没有则新建），写入客户端代码：

// src/client/index.js
// DOM加载完成后执行（比window.onload更早触发）
document.addEventListener('DOMContentLoaded', () => {
  alert("Welcome!");
  // 执行你的自定义函数
});

// 或者等待所有资源加载完成再执行
// window.addEventListener('load', () => {
//   // 你的代码
// });

Docusaurus会自动加载这个文件，无需额外配置，且该文件仅在浏览器环境运行，不会触发SSR报错。

内容的提问来源于stack exchange，提问作者Ken