Web应用程序在iframe中无法读取自己的DOM元素。在iframe外面工作得很好

Question

我有一个高度定制的网络应用程序(用Gradio制作)，需要进入另一个站点的iframe。

网站托管在数字海洋上。Gradio应用程序是在本地PC上托管的。Gradio应用程序是js/css/html。

当我直接在浏览器中加载Gradio应用程序时，一切正常工作。

如果我将应用程序放在iframe中(否则是骨架HTML/而不是加载的其他脚本)，似乎Gradio应用程序就不能再通过自己的js读取自己的DOM元素了。

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

"TypeError:无法读取null (读取'getElementById')“等属性。

我并不试图使用iframe之外的任何内容来读取或更改iframe中的元素，反之亦然。

我的理解是，当在iframe中加载页面时，它应该能够用自己的脚本读取/修改它自己的元素。我搞错了吗？

Answer 1

结果，Gradio使用了一个阴影DOM来混淆事物。刚从他们的密码里删除了。现在跑得很好。

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

至

function gradioApp(){
return document;}

以防其他人碰到这个。谢谢大家的快速帮助！