Javascript DOM不是'；当React尝试注册在window.onload或window.addEventListener中运行的组件时，尚未加载_Javascript_Html_Dom_Deferred

Javascript DOM不是'；当React尝试注册在window.onload或window.addEventListener中运行的组件时，尚未加载

javascript html dom

Javascript DOM不是'；当React尝试注册在window.onload或window.addEventListener中运行的组件时，尚未加载,javascript,html,dom,deferred,Javascript,Html,Dom,Deferred,我在头html标记中有一个脚本标记。加载index.html文件的其余部分后，脚本应添加事件侦听器。因此，在此之前不应运行任何操作。这几乎与在正文末尾添加脚本标记相同，只是浏览器读取javascript并导致一点渲染阻塞 index.html <html> <head> //meta stuff <script src="https://unpkg.com/babel-standalone@6/babel.min.js">

我在头html标记中有一个脚本标记。加载index.html文件的其余部分后，脚本应添加事件侦听器。因此，在此之前不应运行任何操作。这几乎与在正文末尾添加脚本标记相同，只是浏览器读取javascript并导致一点渲染阻塞

index.html

<html>
    <head>
        //meta stuff
        <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
        <script src="https://unpkg.com/react@15/dist/react.js"></script>
        <script src="https://unpkg.com/react-dom@15/dist/react-dom.js"></script>
        <script type="text/javascript" src="./code/webapp.js"></script>
    </head>
    <body>
        <noscript>Javascript is not enabled!</noscript>
        <div id="root"></div>
    </body>
</html>

奇怪的是函数App（）在window.onload或window.addEventListener（'load'）期间被激发。我以前在我的个人网站上使用过这个，但是我在脚本标签上有一个延迟和异步，所以这可能就是为什么它总是正确启动的原因

webapp.js

...
function App() {
    console.log('App loading...');
    const reactroot = document.getElementById('root');
    var app = React.createElement(WebApp, null);
    ReactDOM.render( app, reactroot);
}
window.onload = App;

如果有人建议使用document.ready（），我尽量不依赖jQuery。我还想将其用于制作网站，而不仅仅是我的个人作品集。因此，我不能依赖于在脚本标记中添加defer/async

相关主题：

您应该使用事件而不是

onload

回调

document.addEventListener("DOMContentLoaded", function(event) {
    console.log("DOM fully loaded and parsed");
});

检查有关

onload

DomContentLoaded

事件的更多信息，这些错误实际上是在窗口加载事件之前触发的。作为记录，我也不介意移动我的脚本标签。我只是不明白为什么这些事件侦听器没有按照我认为应该的方式工作。你有一个id为“root”的html元素（可能是一个div）？是的，我有。我将把index.html添加到问题中。依我看，你的问题似乎来自另一个方向。可能是webapp.js文件的顶部？webapp.js顶部唯一的东西是React类和const json对象。事实上，也许这是来自左栏，但我有一个自动缓存文件的服务人员。如果（这部分听起来很疯狂），如果我的应用程序认为Windows或DOM是以某种方式从缓存文件加载的呢。因此，该事件已经发生，但新文件尚未加载。唯一的问题是，我正在做艰苦的重新加载。所以这可能没有意义。

document.addEventListener("DOMContentLoaded", function(event) {
    console.log("DOM fully loaded and parsed");
});