vmars316 5 Posted February 19 Report Share Posted February 19 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... Quote Link to post Share on other sites
Ingolme 1,039 Posted February 19 Report Share Posted February 19 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. Quote Link to post Share on other sites
vmars316 5 Posted February 25 Author Report Share Posted February 25 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> Quote Link to post Share on other sites
Ingolme 1,039 Posted February 26 Report Share Posted February 26 Have you considered using the contentDocument property? Quote Link to post Share on other sites
vmars316 5 Posted February 26 Author Report Share Posted February 26 (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 by vmars316 typo Quote Link to post Share on other sites
Ingolme 1,039 Posted February 26 Report Share Posted February 26 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. Quote Link to post Share on other sites
vmars316 5 Posted February 26 Author Report Share Posted February 26 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> Quote Link to post Share on other sites
Ingolme 1,039 Posted February 27 Report Share Posted February 27 I don't know what's in your iframe. What does console.log(allTags) show? Quote Link to post Share on other sites
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.