Tengo una colección de artículos de noticias de múltiples fuentes que trato de mostrar. Algunos de los sitios web no permiten que su contenido se cargue dentro de un iframe , por lo que quiero verificar si el contenido se está cargando y redirigir al artículo original si está bloqueado.
Cuando trato de ubicar el iframe con DOM, no está definido, cuando trato de hacerlo con useRef , sucede lo mismo. ¿Hay alguna forma de verificar la conexión exitosa o solo la url en el iframe ?
Aquí está el código:
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> );}
Puede usar el evento onload de un 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> ); }