Javascript 未通过 href://test.html 从 index.html 加载到 test.html答案

【问题标题】：Javascript not loaded in test.html from index.html via href://test.htmlJavascript 未通过 href://test.html 从 index.html 加载到 test.html
【发布时间】：2016-11-28 17:29:18
【问题描述】：

作为一个使用 javascript 的新手，我正在运行 Appengine (https://cloud.google.com/appengine/docs/java/endpoints/getstarted/clients/js/add_post) 的代码示例。我添加了一个指向新 html 页面 (test.html) 的超链接。但是，当我测试 test.html 时。 javascript 不起作用。我认为它没有加载。需要一些方向。提前致谢。

index.html:

<!DOCTYPE html>
<html>
<head>
    <title>Hello Endpoints!</title>
    <script async src="/js/base.js"></script>
    <link rel="stylesheet" href="/bootstrap/css/bootstrap.css">
    <link rel="stylesheet" href="/bootstrap/css/bootstrap-responsive.css">
    <style>
        body {
            padding-top: 40px;
            padding-bottom: 40px;
            background-color: #f5f5f5;
        }
        blockquote {
            margin-bottom: 10px;
            border-left-color: #bbb;
        }
        form {
            margin-top: 10px;
        }
        form label {
          width: 90px;
          display: inline-block;
        }
        .form-signin input[type="text"] {
            font-size: 16px;
            height: auto;
            margin-bottom: 15px;
            padding: 7px 9px;
        }
        .row {
            margin-left: 0px;
            margin-top: 10px;
            overflow: scroll;
        }
    </style>
</head>
<body>

<div id="testLinks">
    <a href="test.html">test Page</a>
</div>
<div class="navbar navbar-inverse navbar-fixed-top">
    <div class="navbar-inner">
        <div class="container">
            <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="brand" href="#">Hello Endpoints!</a>
        </div>
    </div>
</div>

Test.html：

<!DOCTYPE html>
<html>
<head>
    <title>Hello Endpoints!</title>
    <script async src="/js/base.js"></script>
    <link rel="stylesheet" href="/bootstrap/css/bootstrap.css">
    <link rel="stylesheet" href="/bootstrap/css/bootstrap-responsive.css">
    <style>
        body {
            padding-top: 40px;
            padding-bottom: 40px;
            background-color: #f5f5f5;
        }
        blockquote {
            margin-bottom: 10px;
            border-left-color: #bbb;
        }
        form {
            margin-top: 10px;
        }
        form label {
          width: 90px;
          display: inline-block;
        }
        .form-signin input[type="text"] {
            font-size: 16px;
            height: auto;
            margin-bottom: 15px;
            padding: 7px 9px;
        }
        .row {
            margin-left: 0px;
            margin-top: 10px;
            overflow: scroll;
        }
    </style>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
    <div class="navbar-inner">
        <div class="container">
            <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="brand" href="#">Hello Endpoints!</a>
        </div>
    </div>
</div>

base.js：

/**
 * @fileoverview
 * Provides methods for the Hello Endpoints sample UI and interaction with the
 * Hello Endpoints API.
 */

/** google global namespace for Google projects. */
var google = google || {};

/** appengine namespace for Google Developer Relations projects. */
google.appengine = google.appengine || {};

/** samples namespace for App Engine sample code. */
google.appengine.samples = google.appengine.samples || {};

/** hello namespace for this sample. */
google.appengine.samples.hello = google.appengine.samples.hello || {};

/**
 * Prints a greeting to the greeting log.
 * param {Object} greeting Greeting to print.
 */
google.appengine.samples.hello.print = function(greeting) {
  var element = document.createElement('div');
  element.classList.add('row');
  element.innerHTML = greeting.message;
  document.querySelector('#outputLog').appendChild(element);
};

/**
 * Gets a numbered greeting via the API.
 * @param {string} id ID of the greeting.
 */
google.appengine.samples.hello.getGreeting = function(id) {
  gapi.client.helloworld.greetings.getGreeting({'id': id}).execute(
      function(resp) {
        if (!resp.code) {
          google.appengine.samples.hello.print(resp);
        }
      });
};

/**
 * Lists greetings via the API.
 */
google.appengine.samples.hello.listGreeting = function() {
  gapi.client.helloworld.greetings.listGreeting().execute(
      function(resp) {
        if (!resp.code) {
          resp.items = resp.items || [];
          for (var i = 0; i < resp.items.length; i++) {
            google.appengine.samples.hello.print(resp.items[i]);
          }
        }
      });
};

/**
 * Enables the button callbacks in the UI.
 */
google.appengine.samples.hello.enableButtons = function() {
  var getGreeting = document.querySelector('#getGreeting');
  getGreeting.addEventListener('click', function(e) {
    google.appengine.samples.hello.getGreeting(
        document.querySelector('#id').value);
  });

  var listGreeting = document.querySelector('#listGreeting');
  listGreeting.addEventListener('click',
      google.appengine.samples.hello.listGreeting);

};
/**
 * Initializes the application.
 * @param {string} apiRoot Root of the API's path.
 */
google.appengine.samples.hello.init = function(apiRoot) {
  // Loads the OAuth and helloworld APIs asynchronously, and triggers login
  // when they have completed.
  var apisToLoad;
  var callback = function() {
    if (--apisToLoad == 0) {
      google.appengine.samples.hello.enableButtons();
    }
  }

  apisToLoad = 1; // must match number of calls to gapi.client.load()
  gapi.client.load('helloworld', 'v1', callback, apiRoot);
};

【问题讨论】：

标签： javascript html google-app-engine

【解决方案1】：

您必须至少在 HTML 标头中添加 js，例如，

index.html

 <html>
    <head>
     <script src="myscripts.js"></script> 
    </head>
    <body></body>
    </html>

像 Javascript 文件和 html 文件应该是这样的文件夹结构

testFolder/js/base.js

testFolder/index.html

【讨论】：

在test.html文件第(5)行：()，我也试过了，()。下一个工作。
这是将javascript和.htnl绑定在一起的java文件：
@wasabi 答案已修改并解释了所需的文件夹结构。
我正在使用示例附带的文件夹结构。：
我使用的是示例附带的文件夹结构。: (src/main/webapp/js/base.js) 并且 html 文件在同一个文件夹中 (src/main/webapp/ index,html 和 (src/main/webapp/test.html)。我假设 mvn 将获取所有 html 文件，因为它们位于同一目录中。它们都引用相同的 javascript base.js。它有什么与命名空间有关？

【解决方案2】：

问题是从 html 页面返回 null。我对 test.js 文件中的元素有多个 DOM 请求。这是由于从另一个 .js 复制 .js。总之，如果你有任何 DOM 请求，它必须在 html 文件中有相应的标签。如果不是，它将返回一个空值。如果你不在乎，那很好。但是，就我而言，我期待一个有效的回报。这会引发异常。

附言下单也要小心。如果你有混合 DOM 请求。它也可能在调试过程中导致问题。

【讨论】：