[SOLVED] Accessing non-PlayCanvas created DOM elements

Help & Support
1

Hi!

We have downloaded the application, and added it into an iFrame. I have a div on the site, that I want to be able to access inside the application. Basically when a button is pressed, this div needs to show. If I create the UI in PlayCanvas the document.getElementById or the document.querySelector finds the div, however this way, the div is limited to be inside the iFrame (it needs to fill the actual screen height).

If I place the div in the HTML page, where the iFrame is placed, neither getElementById nor querySelector finds the div.

Any ideas?

2

Hi @at_3DigitStudio,

That happens because the iframe is a different HTML document. You can still access its elements, if both sites (parent and child) are hosted in the same domain name:

https://www.w3schools.com/howto/howto_js_element_iframe.asp

2 Likes
3

Hi @Leonidas.

So a window.parent.document.getElementsById should work in this case? I’ll try it in a second.

4

Yes, exactly, from the iframe to access a parent element you should do that and it will work.

1 Like
5

It does indeed work, thank you for the quick response. :smile:

1 Like