querySelector not returning elements with class inside iframe

Question

I'm trying to return the first h1 element inside an iframe I've loaded onto my page.

var res = await (await fetch(`https://www.google.com/search?q=${text}`)).text(); //Text is a variable assigned previously
var currentFrame = document.getElementById('frame0');       
var currentDocument = currentFrame.contentWindow.document;
currentDocument.write(res);

var elem = currentDocument.querySelector("h1");
console.log(elem);

I'm being able to get the iframe content to show up properly but when I try to print "elem" value whenever the h1 tag of said page has a class it shows up as null.

As in:

<h1>Test</h1> //is found properly and console.log prints "Test" which is what I want

But on the other hand...

<h1 class="classyBoy">Test</h1> //isn't found properly and return null

I've tried changing querySelector("h1") to querySelector("h1 *") and querySelector("* h1") but had no success doing so.

https://stackoverflow.com/questions/364952/jquery-javascript-accessing-contents-of-an-iframe maybe this can help you. You cannot usually get elements that are inside an iframe. — codisfy, Aug 07 '18 at 01:48
Hmmmm. But if that was the case why would I still be able to return classless h1s? — confused.joe, Aug 07 '18 at 01:55

score 0 · Answer 1 · answered Aug 09 '18 at 12:08

0

As soon as I started waiting until currentDocument.body != null the queries started working.

answered Aug 09 '18 at 12:08

confused.joe

11
1
3

querySelector not returning elements with class inside iframe

1 Answers1