Question

我的java脚本文件在我的基本模板的主体中引用：

<body>
...
<script type="text/javascript" src="/static/js/test.js"></script>
</body>

我是另一个扩展基本模板的模板，可以使用onclick事件调用draw()中定义的java脚本函数test.js。可悲的是，我在点击画布区域时只得到一张照片。但是，<script> draw(); </script>调用该函数会出现以下错误：ReferenceError: draw is not defined这怎么可能？

...  
<div class="panel-body">
  # works perfectly fine, somehow the function can be accessed
  <canvas id="canvas" onclick="draw()" width="300" height="10"></canvas>
  # occurs an error, somehow the function can't be accessed anymore...
  <script> draw(); </script>
</div>
...

我使用python flask框架进行后端编程。

Answer 1

因为您在网页末尾初始化了#primary_nav_wrap { display: table; margin: 0 auto; margin: 15px auto 0 auto; } #primary_nav_wrap ul { display: table-cell; list-style: none; position: relative; padding: 0; }，并且在初始化之前致电<script>。

我会把它放在头标记中：

draw()

你说<head> ... <script type="text/javascript" src="/static/js/test.js"></script> </head>它的工作原理当然有效，当你点击画布时onclick函数已经初始化了。

Answer 2

脚本的顺序在这里很重要。脚本按页面中遇到的顺序加载。

由于“draw（）”是一个直接调用，我认为这是在正文中的标记之前定义的，所以这就是为什么浏览器说没有定义它。另一方面，画布的onClick只能在页面加载后发生，这就是它在那里工作的原因。

我建议以某种方式将特定页面的javascripts放在基本模板的脚本下面（你必须使用也许你需要两个单独的引用），或者你可以使用其他技术，如JQuery的$（文档）。就绪（）。

这是一个非常相似的问题，希望有助于： load and execute order of scripts

Answer 3

为什么不等待文档加载？这将是解决这个问题的正确方法。

document.addEventListener('load',  function (){
    draw();
});

对于丑陋的缩进感到抱歉，我正在使用手机

无法从外部javascript文件

3 个答案: