vmars316 Posted February 19, 2021 Share Posted February 19, 2021 Hello , I have an html page with an iframe inside . And I am trying unsuccessfully to querySelect a <a> in the iframe . function Function_1(){ console.log("Function-1()") const iFrame1 = document.querySelector("iFrame"); console.log(iFrame1) const iFrame1Body = iFrame1.Document.querySelector("a") ; console.log(iFrame1Body) } No probs with 'querySelector("iFrame")' . But with 'querySelector("iFrame")' I get error 'Uncaught TypeError: Cannot read property 'querySelector' of undefined' . Pls , what am I doing wrong ? Thanks for your Help... Link to comment Share on other sites More sharing options...
Ingolme Posted February 19, 2021 Share Posted February 19, 2021 I'm sure I already told you this in another topic. The <iframe> element does not have a document property. You should check the reference page for iframe to find the property that you need to use. In Javascript, variables, properties and functions are case sensitive. If iframes had a "document" property, typing "Document" would not work. Link to comment Share on other sites More sharing options...
vmars316 Posted February 25, 2021 Author Share Posted February 25, 2021 Are you sure ? Hmm... Making headway , showing iframe elements But I'm still not collecting allTags . Node list is still showing 0 , don't know why . Code: ``` const load = () => { //var iframe1 = document.querySelector(“iframe1”).contentWindow.document; var iframe1 = document.getElementById('iframe1') console.log("iframe1"); console.log(iframe1); var allTags= iframe1.querySelectorAll("a"); console.log("allTags"); console.log(allTags); function WhichLinkWasClicked(evt) { alert( evt.target ) ; evt.preventDefault(); } console.log("for(let i of allTags){1}") for(let i of allTags){ i.addEventListener('click', WhichLinkWasClicked) console.log("for(let i of allTags){2}") console.log(i.allTags) ; } } document.addEventListener('DOMContentLoaded', load); ``` Console: ``` <iframe id="iframe1" src="SomeLocalLinks-01.html" name="iFrame1">#document <!DOCTYPE html> <html lang="en"> <head>… </head> <body> <h1 style="text-align: center">01 Same-Domain , Same Folder </h1> <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> Link to comment Share on other sites More sharing options...
Ingolme Posted February 26, 2021 Share Posted February 26, 2021 Have you considered using the contentDocument property? Link to comment Share on other sites More sharing options...
vmars316 Posted February 26, 2021 Author Share Posted February 26, 2021 (edited) Hmm... I don't understand , why does the Console show "#document" ? What does it represent ? <iframe id="iframe1" src="SomeLocalLinks-01.html" name="iFrame1"> #document <!DOCTYPE html> This doesn't work either ? <script> var iframe1 = [] iframe1 = document.querySelector("iframe1"); console.log(iframe1) var allTags= iframe1.contentWindow.querySelectorAll("a"); console.log(allTags) //for(let i of allTags){i.callMethod} </script> This var allTags= iframe1.contentWindow.querySelectorAll("a"); gives this error: Uncaught TypeError: Cannot read property 'contentWindow' of null Edited February 26, 2021 by vmars316 typo Link to comment Share on other sites More sharing options...
Ingolme Posted February 26, 2021 Share Posted February 26, 2021 Your querySelector() call is not getting the iframe because the selector is wrong. Also, you should be using contentDocument instead of contentWindow because querySelectorAll() belongs to the Document object. Link to comment Share on other sites More sharing options...
vmars316 Posted February 26, 2021 Author Share Posted February 26, 2021 With console.log(allTags[2]) I was expecting to get the 3rd <a> . Why do I get undefined ? <iframe id="iframe1" src="SomeLocalLinks-01.html" name="iFrame1"></iframe> <script> var iframe1 = [] ; var allTags = [] ; iframe1 = document.querySelector("iframe"); console.log(iframe1) var allTags= iframe1.contentDocument.querySelectorAll("a"); //document.querySelectorAll("a"); console.log(allTags) console.log(allTags[2]) </script> Link to comment Share on other sites More sharing options...
Ingolme Posted February 27, 2021 Share Posted February 27, 2021 I don't know what's in your iframe. What does console.log(allTags) show? Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now