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>
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
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>
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…