Web 应用程序在 iframe 中时无法读取它自己的 DOM 元素。 在 iframe 之外工作正常

Question

I have a heavily customized web app (made with Gradio) that needs to go into an iframe on another site.

Website is hosted on Digital Ocean. Gradio app is hosted on a local PC. Gradio app is js/css/html.

When I load the Gradio app directly in the browser, everything works as expected.

If I put the app in an iframe (otherwise skeleton HTML/not other scripts loaded) it seems as though the Gradio app can no longer read it's own DOM elements via it's own js.

<iframe src="https://12894.gradio.app" name="frame2" id="frame2" frameborder="0" marginwidth="0" marginheight="0"></iframe>

"TypeError: Cannot read properties of null (reading 'getElementById')" and such.

I'm NOT trying to read or change elements inside the iframe with anything outside of the iframe or vice/versa.

My understanding was that when loading a page in an iframe, it should be able to read/modify it's own elements with it's own scripts. Am I mistaken?

Answer 1

Turns out, Gradio uses a shadow DOM that confuses things. Just removed it from their code. Runs fine now.

function gradioApp(){
return document.getElementsByTagName('gradio-app')[0].shadowRoot;}

to

function gradioApp(){
return document;}

In case anyone else runs into this. Thanks for everyone's quick help!