javascript - 如何在加载内容的外部 html 文件中调试 JS 脚本做主 div

问题描述

我正在学习一些关于 SPA 的知识。我想制作一个简单的页面，在主index_test0.html文件中我有一个“内容”div。

<html>
  <head>
    <meta charset="utf-8">
    <title>Navigation Example</title>

    <!-- The CSS theme for the site. -->
    <link rel="stylesheet" href="theme.css" />

    <!-- Include jQuery. -->
    <script src="//code.jquery.com/jquery-2.1.1.min.js"></script>

  </head>
  <body>

    <!-- Navigation links -->
    <div id="navbar">
      <a href="#index_test1">Home</a>
      <a href="#index_test2">About</a>
    </div>

    <!-- Dynamic content will be placed here by JavaScript. -->
    <div id="content"></div>

    <!-- The JavaScript code for dynamic behavior. -->
 
  </body>
</html>
<style>

@import url(http://fonts.googleapis.com/css?family=Open+Sans);

/* Style the navigation bar links.  */ 
#navbar a {
  font-family: 'Open Sans', sans-serif;
  font-size: 1.5em;
  margin: 0px 10px 0px 10px;
  padding: 0px 8px 0px 8px;
  color: black;
  text-decoration: none;

  border: 2px solid;
  border-color: white;
  border-radius: 20px;
}

/* Give the user an affordance that each link is clickable. */
#navbar a:hover {
  border-color: black;
}

/* Style the active page link. */
#navbar a.active{
  border-color: gray;
}


</style>

<script>

// This script implements simple routing by loading partial HTML files 
// named corresponding to fragment identifiers.
//
// By Curran Kelleher October 2014

// Wrap everything in an immediately invoked function expression,
// so no global variables are introduced.
(function () {

// Stores the cached partial HTML pages.
// Keys correspond to fragment identifiers.
// Values are the text content of each loaded partial HTML file.
var partialsCache = {}

// Gets the appropriate content for the given fragment identifier.
// This function implements a simple cache.
function getContent(fragmentId, callback){

  // If the page has been fetched before,
  if(partialsCache[fragmentId]) {

    // pass the previously fetched content to the callback.
    callback(partialsCache[fragmentId]);

  } else {
    // If the page has not been fetched before, fetch it.
    $.get(fragmentId + ".html", function (content) {

      // Store the fetched content in the cache.
      partialsCache[fragmentId] = content;

      // Pass the newly fetched content to the callback.
      callback(content);
    });
  }
}

// Sets the "active" class on the active navigation link.
function setActiveLink(fragmentId){
  $("#navbar a").each(function (i, linkElement) {
    var link = $(linkElement),
        pageName = link.attr("href").substr(1);
    if(pageName === fragmentId) {
      link.attr("class", "active");
    } else {
      link.removeAttr("class");
    }
  });
}

// Updates dynamic content based on the fragment identifier.
function navigate(){

  // Isolate the fragment identifier using substr.
  // This gets rid of the "#" character.
  var fragmentId = location.hash.substr(1);

  // Set the "content" div innerHTML based on the fragment identifier.
  getContent(fragmentId, function (content) {
    $("#content").html(content);
  });

  // Toggle the "active" class on the link currently navigated to.
  setActiveLink(fragmentId);
}

// If no fragment identifier is provided,
if(!location.hash) {

  // default to #home.
  location.hash = "#index_test1";
}

// Navigate once to the initial fragment identifier.
navigate();

// Navigate whenever the fragment identifier value changes.
$(window).bind('hashchange', navigate);
}());
</script>

按下菜单中的按钮后，应加载外部文件的内容。但是，我想检查是否可以通过这种方式加载两个静态内容，如index_test1.html文件中所示：

<html>
    <div id="internal_content">
        HOME
    </div>
<html>

以及动态内容，其脚本存储在外部文件 - index_test2.html 中：

<html>
    <div id="internal_content"></div>
<html>
    
<script>
var c = document.getElementById("internal_content");
c.innerText = "ABOUT";
</script>

我认为它有效。

问题是我在 Chrome 调试窗口中看不到这两个外部文件，所以我无法在index_test2.html中调试脚本。

我应该怎么办？。还是我应该做不同的？

标签： javascripthtmlsingle-page-application

javascript - 如何在加载内容的外部 html 文件中调试 JS 脚本做主 div - 单页应用程序

问题描述

解决方案

推荐阅读