Hello,
Is it possible to detect which link is clicked inside an <iframe> ?
And is it possible to block that link from navigating .
Thanks
<!DOCTYPE html>
<html lang="en">
<head>
<title>Opening Links in an iFrame</title>
<style>
iframe {
width: 100%;
height: 500px;
}
</style>
</head>
<body>
<p><a href="http://vmars.us/Frames-Study/SomeLinks.html" target="myFrame">SomeLinks.html</a></p>
<iframe src="SomeLinks.html" name="myFrame"></iframe>
</body>
</html>
You have 2 pages in consideration:
Are these on the same domain? If not, you are SOL 
.
Thanks
Hello ,
This which-link-was-clicked .js works great
<script>
var links = document.querySelectorAll( 'a' );
for ( var c = 0; c < links.length; c ++ ) {
links[c].addEventListener('click', WhichLinkWasClicked);
}
function WhichLinkWasClicked(evt) {
alert( evt.target ) ;
evt.preventDefault();
}
</script>
And now I need to apply it to an iframe . But so far I am able to do so . Can’t figure out which parameters go where .
<!DOCTYPE html>
<html lang="en">
<head>
<title>Opening Links in an iFrame</title>
<style>
iframe {
width: 100%;
height: 500px;
}
</style>
</head>
<body>
<p><a href="file:///C:/Electron-js/___KidSafeBrowser-020121/main-Child/Frames-Study/Open-Links-In-iFrame.html" target="myFrame">Frames Study</a></p>
<iframe src="file:///C:/Electron-js/___KidSafeBrowser-020121/main-Child/Frames-Study/SomeLocalLinks-00.html" name="myFrame"></iframe>
<script>
var links = myFrame.document.querySelectorAll( 'a' );
for ( var c = 0; c < links.length; c ++ ) {
links[c].addEventListener('click', WhichLinkWasClicked);
}
function WhichLinkWasClicked(evt) {
alert( evt.target ) ;
evt.preventDefault();
}
</script>
</body>
</html>
Thanks for your Help…
Is the iframe from a different domain? If so then it’s going to be impossible.
Same domain
Good one. In that case all of the JavaScript that assigns event handler and finds the link, must be in the child frame. You can then have the parent tell the child to run that code.
Not impossible since the iframe could use the postMessage method to communicate with the parent container even if it’s in a different domain. It’s not always feasible as it would require control over both domains or that the second domain would have a prebuilt API that always communicates with its parent container, but it is possible.
Just wanted to bring it up since I feel like the Message event is not overlooked often enough when the cross-domain communication is being discussed.
If both windows are on the same domain and you want to run Javascript from the parent in the iframe, you can select the iframe window within the window.frames object from the parent container.
Say for instance you want to select your anchor tags in the iframe from the parent container:
const iframe_document = window.frames[3].document; // Assuming your iframe is the 4th item in your object. You will have to look it up.
const iframe_anchor_tags = iframe_document.querySelector('a'); // These are the anchor tags in your iframe. Now you can call run any scripts in them.
Better yet, like @Paul_Wilkins mentioned, you can add the scripts directly into the child frame.
Thanks ,
I think what you are saying is that
each time a new page is loaded into iframe
I can inject a script into into it
and that the injected script
can tell the parent page which link was Clicked .
I am HOPING that’s right ?
Here is the structure of what I want to do
http://vmars.us/Frames_Study/Which-Open-Links-In-iFrame-Which.html
Or you can download all files in a .zip
http://vmars.us/Frames_Study/
Thanks
It’s probably a false positive but I get this warning from my virus software on that link.
Web Protection byBitdefender
Dangerous page blocked for your protection
http://vmars.us/Frames_Study/Which-Open-Links-In-iFrame-Which.html
Dangerous pages attempt to install software that can harm the device, gather personal information or operate without your consent.
TAKE ME BACK TO SAFETYI understand the risks, take me there anywayIf you know this page is not dangerous, you can add it to your Exceptions list.
Be aware that you will not be warned about any threats existing on this page.
Sorry about that Paul , I’ll Post 2 of the 5 , very small pages here .
Which-Open-Links-In-iFrame-Which.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Opening Links in an iFrame</title>
<style>
iframe {
width: 100%;
height: 500px;
}
</style>
</head>
<body>
<p style="text-align: center;">Communiation Between 'parent' and 'iframe Child' elements
<br>On <a> Click in 'iframe' , Send Clicked Url to a 'parent' function .</p>
<iframe src="SomeLocalLinks-01.html" name="myFrame"></iframe>
<script>
var links = myFrame.document.querySelectorAll( 'a' );
for ( var c = 0; c < links.length; c ++ ) {
links[c].addEventListener('click', WhichLinkWasClicked);
}
function WhichLinkWasClicked(evt) {
alert( evt.target ) ;
evt.preventDefault();
}
</script></body></html>
SomeLocalLinks-01.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Opening Links from an iFrame</title>
<style>
iframe {
width: 100%;
height: 500px;
}
</style>
</head>
<body>
<p style="text-align: center">Same-Domain , Same Folder</p>
<br><br><a href="SomeLocalLinks-01.html">SomeLocalLinks-01</a>
<br><br><a href="SomeLocalLinks-02.html">SomeLocalLinks-02</a>
<br><br><a href="SomeLocalLinks-03.html">SomeLocalLinks-03</a>
<br><br><a href="SomeLocalLinks-04.html">SomeLocalLinks-04</a>
<br><br></body></html>
Pages 02,03,04, are exactly the same as page01 , except that the order of the links is different .
All the files are there as ‘fodder for testing’ .
My goal is to figure out how to inject/run code inside of an iframe page . I have an application that desperately needs parent/child communication abilities .
Thanks for your Help…