reactjs 使用ref在react中获取iframe元素

wqlqzqxt 于 2023-11-18 发布在 React

关注(0)|答案(2)|浏览(152)

我有一个包含iframe的组件，我想在react中访问它的内容，我使用ref来处理iframe，我如何从iframe中获取所有锚点标签
下面是我的代码：

const GridGenerator = () => {
      const [loading, setLoading] = useState(true);
      const gridIframe = useRef(null);

  function handleIframe() {
    setLoading(false);
    const iframeItem = gridIframe.current;
    const anchors = iframeItem.contentWindow.getElementsByTagName("a");
  }

  return (
    <div>
      {loading ? <div className={styles.loader} /> : null}
      <iframe
        title="Grid Generator"
        ref={gridIframe}
        src="https://collectearth.users.earthengine.app/view/collect-earth-grid-generator"
        width="100%"
        height="1000px"
        frameBorder={0}
        onLoad={handleIframe}
      />
      <Link to={routes.HOME}>Go Back</Link>
    </div>
  );
};

字符串
所以，它工作得很好，直到：

const iframeItem = gridIframe.current;

型
它返回iframe标签，但这一行不好用

const anchors = iframeItem.contentWindow.getElementsByTagName("a");

型
有什么解决办法吗？谢谢

reactjs

来源：https://stackoverflow.com/questions/62521827/get-iframe-elements-in-react-using-ref

2条答案

按热度按时间

xurqigkl1#

对我来说，添加到Window工作，而不是Document：
没有bind()：

function handleSubmit(e) {
    alert('yay 1!', e);
}

iframeRef.current?.contentWindow?.addEventListener('click', handleSubmit, false);

字符串
bind()：

function handleSubmit2() {
    alert('yay 2!', this.ele);
}

iframeRef.current?.contentWindow?.addEventListener('click', handleSubmit2.bind({ ele: iframeRef }), false);

型

赞(0）回复(0）举报 2023-11-18

nfs0ujit2#

你需要访问contentWindow的文档才能得到元素，Window接口没有任何方法叫getElementsByTagName。
所以与其
const anchors = iframeItem.contentWindow.getElementsByTagName("a");个
你应该做
const anchors = iframeItem.contentWindow.document.getElementsByTagName("a");个

赞(0）回复(0）举报 2023-11-18

我来回答

reactjs 使用ref在react中获取iframe元素

2条答案

相关问题

热门标签

最新问答