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

时间:2016-11-28 17:29:18

标签: javascript html google-app-engine

作为使用javascript的newby,我正在浏览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);
};

2 个答案:

答案 0 :(得分:0)

您必须至少在HTML标题中添加js,例如

的index.html

 <html>
    <head>
     <script src="myscripts.js"></script> 
    </head>
    <body></body>
    </html>
像Javascript文件和html文件应该像在这个文件夹结构

  

testFolder / js / base.js

     

testFolder / index.html中

答案 1 :(得分:0)

问题是从html页面返回null。我在test.js文件中有多个DOM请求元素。这就是从另一个.js复制.js。总之,如果您有任何DOM请求,它必须在teh html文件中有相应的标记。如果不是,它将返回null。如果你不在乎,那很好。但是,在我的情况下,我期待有效的回报。这,它抛出异常。

P.S。也要小心订购。如果你有混合DOM请求。它也可能在调试过程中出现问题。