FiveM加载页：如何用JS实现iframe上方可交互的自定义光标？

我完全懂你遇到的困扰——自定义图片光标在普通页面区域能正常跟着鼠标走，但一移到iframe上就直接“消失”，还得保证iframe能正常交互对吧？这事儿的核心原因是iframe是一个独立的浏览上下文，父页面的mousemove事件监听器根本抓不到iframe内部的鼠标移动，单纯调z-index当然解决不了问题。

下面给你两种可行的解决方案，分别对应同域和跨域的iframe场景：

方案一：同域iframe（最常用，FiveM加载页大概率适用） #

如果你的iframe和父页面是同域的（比如都是你自己服务器上的资源），可以直接监听iframe内部的鼠标事件，转换坐标后更新光标位置：

1. 修正CSS（保持核心设置） #

先确保光标元素的CSS没问题，pointer-events: none是关键——它能让光标元素不阻挡下层iframe的交互：

#cursor {
  position: absolute;
  z-index: 99999;
  pointer-events: none;
  width: 40px;
}

iframe {
  position: relative; /* 确保z-index的层级关系生效 */
}

2. 更新JavaScript脚本 #

把光标更新逻辑抽成独立函数，同时监听父页面和iframe内部的鼠标移动事件：

window.onload = function() {
  const cursor = document.getElementById("cursor");

  // 统一的光标位置更新函数
  function updateCursor(x, y) {
    const adjustedX = x - cursor.offsetWidth + 23;
    const adjustedY = y - 6;
    cursor.style.left = `${adjustedX}px`;
    cursor.style.top = `${adjustedY}px`;
  }

  // 监听父页面的鼠标移动
  document.body.addEventListener("mousemove", (e) => {
    updateCursor(e.clientX, e.clientY);
  });

  // 获取iframe元素（根据你的实际选择器调整）
  const loadingIframe = document.querySelector("iframe");
  if (loadingIframe) {
    // 等iframe加载完成再绑定事件
    loadingIframe.addEventListener("load", () => {
      // 获取iframe内部的文档对象
      const iframeDoc = loadingIframe.contentDocument || loadingIframe.contentWindow.document;

      // 监听iframe内部的鼠标移动
      iframeDoc.addEventListener("mousemove", (e) => {
        // 把iframe内部的坐标转换成父页面的全局坐标
        const iframeRect = loadingIframe.getBoundingClientRect();
        const globalX = e.clientX + iframeRect.left;
        const globalY = e.clientY + iframeRect.top;
        updateCursor(globalX, globalY);
      });

      // 监听鼠标进入iframe的事件，避免刚进入时光标位置跳变
      loadingIframe.addEventListener("mouseenter", (e) => {
        updateCursor(e.clientX, e.clientY);
      });
    });
  }
};

这段代码的关键在于：

• 复用光标更新函数，避免重复代码
• 等待iframe加载完成后再绑定内部事件，确保能正确获取到iframe的文档对象
• 把iframe内部的相对坐标转换成父页面的全局坐标，保证光标位置准确

方案二：跨域iframe（特殊场景） #

如果你的iframe是跨域的（比如加载了第三方资源），因为浏览器的同源策略限制，你无法直接访问iframe内部的文档对象。这时候可以用一个透明的覆盖层来监听鼠标事件：

1. 添加覆盖层HTML结构 #

给iframe套一个相对定位的容器，然后在上面加一个透明的div覆盖层：

<div style="position: relative;">
  <iframe src="你的跨域资源地址"></iframe>
  <div id="iframe-overlay"></div>
</div>

2. 覆盖层的CSS设置 #

让覆盖层完全覆盖iframe，同时确保它不会阻挡iframe的交互：

#iframe-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 99998; /* 比光标元素低一层 */
  pointer-events: auto; /* 能接收鼠标事件 */
  background: transparent; /* 完全透明 */
}

#cursor {
  /* 保持之前的设置不变 */
  position: absolute;
  z-index: 99999;
  pointer-events: none;
  width: 40px;
}

3. 更新JavaScript脚本 #

监听覆盖层的鼠标移动事件，直接更新光标位置：

window.onload = function() {
  const cursor = document.getElementById("cursor");
  const overlay = document.getElementById("iframe-overlay");

  function updateCursor(x, y) {
    const adjustedX = x - cursor.offsetWidth + 23;
    const adjustedY = y - 6;
    cursor.style.left = `${adjustedX}px`;
    cursor.style.top = `${adjustedY}px`;
  }

  // 父页面的鼠标监听
  document.body.addEventListener("mousemove", (e) => {
    updateCursor(e.clientX, e.clientY);
  });

  // 覆盖层的鼠标监听
  if (overlay) {
    overlay.addEventListener("mousemove", (e) => {
      updateCursor(e.clientX, e.clientY);
    });
    overlay.addEventListener("mouseenter", (e) => {
      updateCursor(e.clientX, e.clientY);
    });
  }
};

这个方案的原理是用透明覆盖层“接管”鼠标移动事件，同时因为光标元素的pointer-events: none，用户点击时事件会穿透到iframe，不会影响交互。

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