CODEWITHSUNDEEP
javascriptreactjsdomiframe
Nikolay Patarov
Nikolay Patarov

Reputation: 335

How to check if iframe content is loaded in react

I have a collection of news articles from multiple sources which i try to display. Some of the websites don't allow their content loaded inside an iframe, so i want to check whether the content is being loaded and redirect to the original article if blocked.

When i try to locate the iframe with DOM it is undefined, when i try to do it with useRef same thing happens. Is there some way to check for successful connection or just the url in the iframe?

Here is the code:

export default function Article(){

// just getting the source url for the iframe

const url = window.location.href.split("=")[1]

const [ article, setArticle ] = useState();

useEffect(() => {
    Axios.get("http://localhost:8000/article?id=" + url).then(
        (response) =>{
            setArticle(response.data.link);
        }
    )
}, []);

// just getting the source url for the iframe

return(
    <div>
        <iframe id="frame" src={article}></iframe>
    </div>          
);

}

Upvotes: 3

Views: 13384

Answers (1)

felixmosh
felixmosh

Reputation: 35503

You can use the onload event of an iframe.

export default function Article() {
  // just getting the source url for the iframe

  const url = window.location.href.split("=")[1];

  const [article, setArticle] = useState();

  useEffect(() => {
    Axios.get("http://localhost:8000/article?id=" + url).then((response) => {
      setArticle(response.data.link);
    });
  }, []);

  handleIfrmeLoad = () => console.log("iframe loaded");

  return (
    <div>
      <iframe id="frame" src={article} onload={handleIfrmeLoad}></iframe>
    </div>
  );
}

Upvotes: 2

Related Questions