在部分HTML中执行JavaScript以进行单页导航

Question

我是JavaScript的新手，我正尝试使用引导程序构建一个单页导航博客。 我有一个基本的index.html ，其中包含以下代码：

<Some bootstrap navbar on top that includes "home", "about", "contact">

<div id="content">
</div>

<script src="navigation.js"></script>

navigation.js文件具有一个window.addEventListener（“ hashchange”，navigation），该监听器仅侦听hashchange并根据哈希值设置content-div的innerHTML 。 每个页面的实际内容都被分为部分html文件，例如about.html目前仅具有<p>About</p> ，并且这些部分html使用AJAX提取。

到目前为止，一切正常，但是对于home.html我不仅只有静态HTML，我还想执行呈现所有博客文章的JavaScript。 基本上，我希望home.html包含：

<div id="posts">
</div>
<script src="renderposts.js"></script>

其中renderposts.js是一个脚本，用于将posts-div的innerHTML设置为包括我的所有博客文章。

但是，这不起作用，未执行renderposts.js 。 我是否在以错误的方式考虑这个问题，应该如何处理？ 我管理的唯一变通方法是改为将代码包含在navigation.js文件中，并使用if语句执行该代码，以检查location.hash当前是否为“ #home”。 这显然是一个非常丑陋的解决方案。

Answer 1

我在搜索主题时未找到此帖子，但发布后它出现在相关部分中： 使用javascript加载部分html

基本上，从contentDiv.innerHTML = content;更改contentDiv.innerHTML = content; 到jQuerys $('div#content').html(content); 解决了这个问题。 我仍然很好奇这是否是解决主要问题的“正确”方法，还是我对问题的处理不正确。

Answer 2

一种处理方法是从主页链接renderposts.js，然后在加载home.html的函数中执行javascript函数。 就像是

<script src="navigation.js"></script>
<script src="renderposts.js"></script>
<button onclick="loadHome">Click Me</button>

<script>
    function loadHome() {
        // Some AJAX Requst Here //

        var contentDiv = document.getElementById("content");
        contentDiv.innerHTML = content;
        getPosts();
        renderPosts();
    }
</script>