堆栈内存溢出
  繁体   English   中英

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

[英]Javascript not loaded in test.html from index.html via href://test.html

 原文  2016-11-28 17:29:18  4   2    javascript/ html/ google-app-engine

问题描述

作为使用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);
};

2 个解决方案

解决方案1
 0  2016-11-28 17:33:25

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

index.html 

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

像Javascript文件和html文件应该在此文件夹结构中

testFolder / js / base.js

testFolder / index.html

解决方案2
 0  2016-12-01 14:07:42

问题是html页面返回null。 我在test.js文件中对元素有多个DOM请求。 这是因为从另一个.js复制了.js。 总之，如果您有任何DOM请求，则它在html文件中必须具有相应的标记。 如果不是，它将返回null。 如果您不在乎，那就很好。 但是，就我而言，我期望得到有效的回报。 这会引发异常。

ps还请注意订购。 如果您有混合DOM请求。 它也可能在调试期间引起问题。

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 onclick load {％include&#39;test.html&#39;％} 无法获取/test.html-node.js-javascript 未捕获的 ReferenceError：图表未在 test.html:11 中定义 在node.js中获取[Cannot GET /test.html] [.CommandBufferContext]渲染警告：没有纹理绑定到单元1 test.html：1 流星上的传单空白屏幕，而不是单个非流星test.html上的传单 错误：ENOTDIR：不是目录，scandir&#39;src / app / test.html&#39; 加载webView.loadUrl（“ file：///android_asset/test.html”）; 模拟器无法加载手机 运行Node.js服务器时无法GET /test.html 如何使用异步通信将表单数据发送到test.html？
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM