在 Google App Engine 中使用 javascript (.js)答案

【问题标题】：Using javascript (.js) in Google App Engine在 Google App Engine 中使用 javascript (.js)
【发布时间】：2014-03-18 10:54:28
【问题描述】：

使用 GAE，我正在尝试从单独的 .js 文件中调用文本淡入淡出函数。

在本地运行应用时，模板和样式都可见，但 JavaScript 代码不会运行。

有趣的是：带有样式和 JS 的 HTML 文档在浏览器中单独运行时可以正常工作。

main.py:

import webapp2
import jinja2

from google.appengine.ext import db
from google.appengine.api import users
from google.appengine.ext import ndb

import os
import urllib

JINJA_ENVIRONMENT = jinja2.Environment(
    loader=jinja2.FileSystemLoader(os.path.dirname(__file__)),
    extensions=['jinja2.ext.autoescape'],
    autoescape=True)

template = JINJA_ENVIRONMENT.get_template('/templates/Fade.html')

class MainHandler(BaseHandler):

    def get(self):
    self.response.headers['Content-Type'] = 'text/html'
        self.response.write(template.render())

app = webapp2.WSGIApplication([
    ('/', MainHandler),
    ('/login', LoginHandler),
    ('/logout', LogoutHandler),
    ("/(?:[a-zA-Z0-9_-]+/?)", PageHandler),
    ('/signup', SignupHandler)
], debug=True)

Fade.html：

<!DOCTYPE html>
<html>
<head>
<title>Welcome!</title>

<style type="text/css">     
    div.box1{
        position:absolute;
        top:30%;
        left:35%;
    }

    div.box2{
        position:absolute;
        top:45%;
        left:40%;
    }
</style>

<script type = "text/javascript" src="D:\Program\Google\Appengine Apps\myExample\static\js\Fade.js"></script>

</head>

<body onload="fadeDivs('div1', 'div2')">

<div id="div1" class="box1">text1</div>
<div id="div2" class="box2">text2</div>

</body>
</html>

Fade.js

var fade_in_from = 0;
var fade_out_from = 10;

function fadeIn(div){

var target = document.getElementById(div);
target.style.display = "block";
var newSetting = fade_in_from / 50;
target.style.opacity = newSetting;
fade_in_from++;

if(fade_in_from == 50){
    target.style.opacity = 1;
    clearTimeout(loopTimer);
    fade_in_from = 0;
    return false;
}


var loopTimer = setTimeout('fadeIn(\''+div+'\')',30);
}

function setOpacity(div){
target = document.getElementById(div);
target.style.opacity = 0;
}

function fadeDivs(div1, div2){
setOpacity(div1);
setOpacity(div2);

fadeIn(div1);
var time = setTimeout('fadeIn(\''+div2+'\')', 1500);
}

app.yaml：

application: myExample
version: 1
runtime: python27
api_version: 1
threadsafe: yes

handlers:
- url: /favicon\.ico
  static_files: favicon.ico
  upload: favicon\.ico

- url: /static/
  static_dir: static

- url: /js
  static_dir: static/js

- url: /images/thumbnails
  static_dir: static/images/thumbnails

- url: .*
  script: main.app

libraries:
- name: webapp2
  version: "2.5.2"
- name: jinja2
  version: "2.6"

【问题讨论】：

您是否使用 chrome 调试您的客户端代码？ developers.google.com/chrome-developer-tools
@voscausa 调试模式显示应用无法访问脚本。看来我现在可以正常工作了。

标签： javascript google-app-engine

【解决方案1】：

<script type = "text/javascript" src="D:\Program\Google\Appengine Apps\myExample\static\js\Fade.js"></script>

这在生产中不起作用，因为这是与您的计算机相关的本地路径。您需要输入src="static/js/Fade.js"。

【讨论】：

非常感谢您发现这一点！ :) 删除 app.yaml 中的 js 处理程序似乎也成功了。