Javascript不是't在包含html模板时执行

Javascript isn't executing when including html-template

本文关键字：html 执行 包含 不是 Javascript      更新时间：2023-09-26

自从我开始为我的导航栏元素使用html模板文件以来，我还没有一个脚本要执行(我可以通过控制台执行它(。我尝试过加载函数，但即使这样似乎也不起作用。我的问题是，我对执行顺序知之甚少，如果我以某种方式阻止了我的脚本。我也没有收到任何错误消息，当不使用html模板时(即，导航栏结构与同一html文件中的所有其他内容一起包含(，页面会按原样加载。所以有什么东西把事情搞砸了。我也可以在控制台上调用它。

(我尝试了各种方法，但除了在文档中包含模板之外，没有什么真正有效的方法，我想避免这些方法。这个设置是众多设置之一(。我希望有人能当场看到我犯的错误。为了可读性，我也删掉了一些css。

编辑：将js抛出窗口，因为发现ASP可用。使用asp在大约半小时内解决了这个问题。

只需将DOM元素放在body标记中即可。始终在正文末尾呈现脚本，并在文档就绪时附加异步javascript文件(或者至少这是我的观点(。

 <html>
    <head>
        <link href="Bootstrap/css/bootstrap.min.css" rel="stylesheet">
    </head>

    <body id="bodyCanvas">

    <div class="masthead">
        <div class="container">        
        </div>
    </div>
    <div class="container Override" id ="pageContainerId" >

    </div>
        <script>
 <script src="http://code.jquery.com/jquery.js"></script> // create a local copy of jquery and other async javascript files you can load at $(document).ready(function(){ //here append async scripts like google maps });
        <script type="text/javascript" src="d3.min.js"></script>
        <script src="Bootstrap/js/bootstrap.min.js"></script>
        <script type='text/javascript'> 
            $(function(){
                $("#pageContainerId").load("navbarTemplate.html"); 
            });
        </script>
            Here goes code....
        </script>
    </body>
</html>

您试图在$("#pageContainerId").load("navbarTemplate.html");中引用的代码在body标记之外，大多数浏览器都会将其删除
请尝试以下操作：

        <script src="http://code.jquery.com/jquery.js"></script>
        <script type="text/javascript" src="d3.min.js"></script>
        <script src="Bootstrap/js/bootstrap.min.js"></script>
        <script type='text/javascript'> 
            $(function(){
                $("#pageContainerId").load("navbarTemplate.html"); 
            });
        </script>
    </head>


<body id="bodyCanvas">
<div class="masthead">
    <div class="container">        
    </div>
</div>
<div class="container Override" id ="pageContainerId" >

</div>
    <script>
        Here goes code....
    </script>
</body>
</html>

此外，由于脚本位于顶部，此时可能无法加载DOM，请尝试以下操作：

 $(document).ready(function(){
                $("#pageContainerId").load("navbarTemplate.html"); 
            });

DOM元素应位于主体标签内

<body id="bodyCanvas">
        <div class="masthead">
    <div class="container">        
    </div>
</div>
<div class="container Override" id ="pageContainerId" >

</div>
</body>

好吧，我无法让它按我想要的方式工作，但事实证明我们的服务器上启用了asp，所以当我切换到它时，我让它在大约半小时内工作得很好。

我怀疑，就最佳实践而言，这是一种更好的方式。

感谢您的回复。

相关文章：