Javascript 如何在另一个应用程序中访问实际呈现的DOM？_Javascript_Reactjs_Iframe_React Dom_Html Imports

Javascript 如何在另一个应用程序中访问实际呈现的DOM？

javascript reactjs iframe

Javascript 如何在另一个应用程序中访问实际呈现的DOM？,javascript,reactjs,iframe,react-dom,html-imports,Javascript,Reactjs,Iframe,React Dom,Html Imports,我有一个用例，我需要在另一个应用程序中呈现react应用程序（类似管理应用程序用例的场景中的用户应用程序预览）。这两个应用程序都来自同一个来源，但不同的存储库和不同的技术。此外，我不需要javascript函数，只有HTML和CSS可以满足这一要求我试过用like 我就是这样 <iframe src="http://example.com"></iframe> $("#myframe").load(function() { var slide =d

我有一个用例，我需要在另一个应用程序中呈现react应用程序（类似管理应用程序用例的场景中的用户应用程序预览）。这两个应用程序都来自同一个来源，但不同的存储库和不同的技术。此外，我不需要javascript函数，只有HTML和CSS可以满足这一要求

我试过用like

我就是这样

<iframe  src="http://example.com"></iframe>
$("#myframe").load(function() {
        var slide =document.getElementById("myframe").contentDocument;

    })


$（“#myframe”）.load（函数（）{
var slide=document.getElementById（“myframe”）.contentDocument；
})

两者在访问时都提供相同类型的DOM输出

<html lang="en">
<head>
  </head>
  <body>
    <div id="app"></div>
    <script src="/dist/build.js"></script>
  </body>
</html>

虽然使用Iframe时，其在Iframe中正确呈现，但唯一的问题是我无法访问DOM

我理解它，因为react应用程序总是在客户端渲染，但我想获得渲染的DOM。那么我如何访问实际渲染的DOM呢

甚至我也注意到，即使是浏览器中的页面源也不能提供呈现的DOM？为什么不显示呈现的DOM？

如果不需要JS功能和事件，则使用ReactDOMServer.renderToString

 import ReactDOMServer from 'react-dom/server';

this.setState（{html:ReactDomServer.renderToString（}）；

这将html作为字符串提供

之后，将html危险地设置为div

 <div id="comp" dangerouslySetInnerHTML={{ __html: this.state.html }} />

完成后，您就有了DOM元素，但是没有任何功能。只有DOM元素供您显示（包括CSS）

在这里读一读

不清楚您真正想要完成什么，但清楚的是您试图在一个非设计的场景中使用ReactJs。直接访问/修改DOM与React设计的每一个原则背道而驰。@简而言之，我需要启用一个用户应用程序预览功能，我可以在rails中的管理应用程序中加入了react。我仍然感到困惑。您希望服务器（rails）呈现客户端（react）DOM，然后让rails以某种方式修改该DOM吗？这似乎是反向的。不，管理应用程序具有完整的堆栈rails（包括视图），并且有一个完全不同的用户应用程序（使用react和rails）。两个应用程序之间没有任何关系，除非它们来自同一个来源。我需要在admin apps中设计用户应用程序预览。听起来你仍然试图强制发生一些原本不应该发生的事情。你没有真正解释为什么你认为你需要访问渲染应用程序的DOM，如果你认为你需要的话I计算DOM，您可能完全忽略了ReactJs的要点。React使用阴影DOM来控制更新的呈现方式，这就是原始DOM基本上为空的原因。听起来是个不错的方法，但呈现它的应用程序是rails应用程序。要呈现的应用程序是React应用程序，因此不确定如何采用这种方法h到rails您的web服务器是什么？Apache？节点？Apache web服务器我已经发送了一个节点服务器来为我提供此html。但是您不可能使用rails查看此服务器端渲染

 this.setState({html:ReactDomServer.renderToString(<Component/>});

 <div id="comp" dangerouslySetInnerHTML={{ __html: this.state.html }} />