SolidJS中如何获取iframe内当前页面的URL？

问题根源 #

你现在的代码里，模态框内的render(document.getElementById("myiframe"));是作为纯文本渲染的，没有执行JS逻辑；而且就算执行，也只是获取iframe元素，没有提取出目标URL。要拿到iframe的当前页面地址，需要访问iframe的contentWindow.location.href属性。

解决方案步骤 #

1. 用SolidJS的Ref获取iframe元素：比起原生document.getElementById，SolidJS的Ref更贴合框架响应式机制，避免DOM操作的潜在问题。
2. 用Signal存储iframe的URL：通过SolidJS的createSignal保存获取到的URL，确保模态框能实时显示最新值。
3. 注意同源限制：因为你嵌入的是自行开发的网站，要确保父页面和iframe页面同源（协议、域名、端口完全一致），否则浏览器的同源策略会阻止你访问iframe的contentWindow对象。

修改后的完整代码 #

import { createSignal, createRef, Show } from "solid-js";
import { Modal } from "@your-modal-package"; // 替换成你实际使用的Modal组件包
import { BsArrowLeftCircle } from "react-icons/bs";

export default function YourComponent() {
  const [open, setOpen] = createSignal(false);
  const [iframeUrl, setIframeUrl] = createSignal("");
  const iframeRef = createRef();

  // 获取iframe当前URL的函数
  const getIframeCurrentUrl = () => {
    if (iframeRef.current) {
      try {
        const url = iframeRef.current.contentWindow.location.href;
        setIframeUrl(url);
      } catch (e) {
        setIframeUrl("无法获取URL：跨域限制");
      }
    }
  };

  // 点击按钮时先获取URL，再打开模态框
  const handleOpenModal = () => {
    getIframeCurrentUrl();
    setOpen(true);
  };

  return (
    <>
      <div className="dark:bg-gray-800">
        <iframe
          width="100%"
          height="1300"
          ref={iframeRef}
          src="https://gkwhelps.herokuapp.com"
        ></iframe>
      </div>

      {/* 触发按钮 */}
      <button 
        className="fixed bottom-3 left-14 text-blue-500" 
        onClick={handleOpenModal}
      >
        <BsArrowLeftCircle size={41} />
      </button>

      <Show when={open()}>
        <Modal onClose={() => setOpen(false)} open={open()} title="当前iframe页面URL">
          <div className="px-4">
            {iframeUrl()}
          </div>
        </Modal>
      </Show>
    </>
  );
}

代码说明 #

• iframeRef：绑定到iframe元素，用来安全获取DOM节点。
• getIframeCurrentUrl：尝试访问iframe的contentWindow.location.href，成功则更新iframeUrl Signal；若因跨域失败，会捕获错误并显示提示信息。
• handleOpenModal：点击按钮时先获取最新URL，再打开模态框，确保模态框显示的是当前iframe的页面地址。
• 模态框内容：直接渲染iframeUrl()，展示获取到的URL或错误提示。

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