How to check the status code of URL in iFrame in React?

Question

I am using iframe in react component.I want to check if the url has responded 200 and loaded completely and want to handle error and loading scenarios. I tried to access the iframe id but it's throwing corss origin frame error. Please suggest

Answer 1

If you want add a loading before iframe loaded completely you can handle it by checking when docuemnt of iframe loaded document.getElementById('myframe').contentWindow.document you can create a function in your react component and check iframe like this:

  const [ loading, setLoading ] = useState(true);
  const checkIframe = () => {
    const iframeDocument = document.getElementById('myframe').contentWindow.document;
    if(iframeDocument){
        setLoading(false);
    } else{
      setTimeout(() => {
        checkIframe();
      }, 1000);
    }
  }