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>
);
}
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>
);
}