Question

使用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"

Answer 1

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

这在生产中无效，因为这是与您的计算机相关的本地路径。您需要将某些内容设为src="static/js/Fade.js"。

在Google App Engine中使用javascript（.js）

1 个答案: