Jump to content

Need help querySelector <a> inside of iframe ?


Recommended Posts

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 post
Share on other sites

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 post
Share on other sites

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 post
Share on other sites

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 by vmars316
typo
Link to post
Share on other sites

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 post
Share on other sites

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 post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...