在部分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>