無法從外部javascript文件調用函數

Question

我的Java腳本文件在基本模板的主體中被引用：

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

在擴展基本模板的另一個模板中，可以使用onclick事件調用test.js定義的java腳本函數draw() 。 可悲的是，當我在畫布區域上單擊時，我只會得到一張圖片。 但是通過<script> draw(); </script>調用該函數<script> draw(); </script> <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

因為您在網頁末尾初始化了<script> ，並且在初始化之前調用了draw() 。

我將其放在head標簽中：

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

您說過，對於onclick它當然有效，當您在畫布上單擊時， draw()函數已經初始化。

Answer 2

腳本的順序在這里很重要。 腳本按頁面中遇到的順序加載。

由於“ draw（）”是直接調用，因此我認為這是在主體中的標記之前定義的，因此這就是為什么瀏覽器表示未定義的原因。 另一方面，畫布的onClick只能在頁面加載后發生，因此這就是它在那里工作的原因。

我建議以某種方式將特定頁面的javascript放在基本模板的腳本下方（您必須使用，可能需要兩個單獨的引用），或者可以使用其他技術，例如JQuery的$（document）.ready（）。

這是一個非常類似的問題，希望對您有所幫助：加載並執行腳本順序

Answer 3

為什么不等待文檔加載？ 那將是解決這個問題的正確方法。

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

對不起，我正在用手機

無法從外部javascript文件調用函數

問題描述

3 個解決方案

解決方案1
1 已采納 2015-09-12 15:28:30

解決方案2
1 2015-09-12 15:31:54

解決方案3
1 2015-09-12 15:34:37

無法從外部javascript文件調用函數

問題描述

3 個解決方案

解決方案1 1 已采納 2015-09-12 15:28:30

解決方案2 1 2015-09-12 15:31:54

解決方案3 1 2015-09-12 15:34:37

解決方案1
1 已采納 2015-09-12 15:28:30

解決方案2
1 2015-09-12 15:31:54

解決方案3
1 2015-09-12 15:34:37