No mate, what I am saying is that if the browser thinks that the <iframe>
is from a different site or server it will hide all the properties of the iframe.contentDocument
and getElementById(), querySelector(), querySelectorAll()
will return undefined
or an empty nodelist
.
quick reference video -> https://www.youtube.com/watch?v=-mNp3-UX9Qc
If your <iframe>
is from the same server, you don’t need it in an <iframe>
(because you trust your content).
If you want to run a function
that checks all your <a>
on your page against a list of safe sites, do that (maybe prevent link clicking until the function has run or dynamically add links to the page after they have been checked).
If you want to open content from another site (your links) inside an <iframe>
this video will show you how -> https://www.youtube.com/watch?v=cmA-IyD8_BA;
This is a modified version of the code part you want.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>First Window</title>
<style>
iframe {border: 1px solid red;}
button { margin: 1rem; }
</style>
</head>
<body>
<iframe
id="fr"
name="myFrame"
width="400"
height="400"
src="about:blank"
></iframe>
<br>
<a id="btnFrame" href="https://www.ntnews.com.au/">The NT news</a>
<script>
let other = null; //will be our window reference
let features =
'menubar=yes,location=yes,resizable=yes,scrollbars=yes,status=yes';
//,height=400,width=400
const runCheck = (x) => { return new Promise((resolve) => { return setTimeout(() => resolve(), 3000 )})}
const checkThenDisplay = async function(ev){
let url = ev.target.href;
let check = await runCheck(url);
let other = window.open(url, 'myFrame');
}
document.getElementById('btnFrame').addEventListener('click', (ev) => {
event.preventDefault();
checkThenDisplay(ev)
});
</script>
</body>
</html>
Quick note, some pages will not allow you to open them inside an <iframe>
e.g google.com and also sandbox your iframe however you see fit…
Side note if your checking function is async (relies on fetch, import ect) just await
the fetch()
not runCheck()
.
If not async
, inline your code in checkThenDisplay()
and drop the async
.