获取react中iframe的里面的图片

在React中获取iframe中的图片有几种方法：

1. 使用原生JavaScript

可以使用原生JavaScript代码来获取iframe中的图片，方法如下：

import React from 'react';

function MyComponent() {
  const handleButtonClick = () => {
    const iframe = document.getElementById("my-iframe"); // 获取iframe元素
    const iframeDoc = iframe.contentWindow.document; // 获取iframe文档对象
    const images = iframeDoc.querySelectorAll("img"); // 获取所有img标签元素

    images.forEach((img) => {
      console.log(img.src); // 打印图片的src属性
    });
  };

  return (
    <div>
      <button onClick={handleButtonClick}>获取iframe中的图片</button>
      <iframe id="my-iframe" src="https://www.example.com"></iframe>
    </div>
  );
}

在上面的代码中，我们首先通过document.getElementById获取到id为my-iframe的iframe元素，然后通过contentWindow.document获取iframe内部的文档对象。接着我们可以使用querySelectorAll方法来获取所有img标签元素，并遍历这些元素并打印它们的src属性值。

1. 使用第三方库

如果你想要更方便地获取iframe中的图片，可以使用一些第三方库，如iframe-resizer或react-frame-component。这些库会提供更方便的API来获取iframe中的内容。

import React, { useRef } from 'react';
import * as iframeResizer from 'iframe-resizer'; // 导入第三方库

function MyComponent() {
  const iframeRef = useRef(null);

  const handleIframeLoad = () => {
    const images = iframeRef.current.contentDocument.querySelectorAll("img");
    images.forEach((img) => {
      console.log(img.src);
    });
  };

  return (
    <div>
      <iframe
        ref={iframeRef}
        src="https://www.example.com"
        onLoad={handleIframeLoad}
        style={
  { width: "100%", minHeight: "500px" }}
      />
    </div>
  );
}

在上面的代码中，我们使用了iframe-resizer库来自动调整iframe的高度，并在iframe加载完成后调用handleIframeLoad函数来获取其中的图片。这样可以帮助直接操作iframe中的子元素，而不用考虑iframe的HTML结构和跨域访问的问题。