为单页导航在部分html中执行JavaScript

Question

我是javascript新手，我正在尝试使用bootstrap构建一个单页导航博客。我有一个基本的index.html，它有以下代码:

<Some bootstrap navbar on top that includes "home", "about", "contact">
<div id="content">
</div>
<script src="navigation.js"></script>

navigation.js文件有一个窗口。addEventListener("hashchange"，导航)，它只监听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语句检查位置是否正确。哈希当前是"#home"。这显然是一个非常难看的解决方案

Answer 1

我没有找到这个帖子时搜索的主题，但它出现在张贴后的相关部分:加载部分html与javascript在

基本上，从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>