作为使用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);
};
答案 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请求。它也可能在调试过程中出现问题。