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

Question

我有一个高度定制的 web 应用程序（使用 Gradio 制作），需要将 go 转换为另一个站点上的 iframe。

网站托管在 Digital Ocean 上。 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;}

以防其他人遇到这种情况。 感谢大家的快速帮助！