如何讓window.onload函數在Jade模板語言中工作

我是Jade和NodeJS express的新手。我有一個簡單的網頁，用div標籤加載jpeg。我希望能夠有一個響應式圖像映射與以下的HTML和JS，但不能得到它的工作。如何讓window.onload函數在Jade模板語言中工作

<div style="width:100%;"> 
<img id="img_ID" src="http://pindragon.social/images/landing.jpeg" usemap="#map" border="0" width="100%" alt="" />

window.onload = function() { 
var ImageMap = function (map, img) { 
     var n, 
      areas = map.getElementsByTagName('area'), 
      len = areas.length, 
      coords = [], 
      previousWidth = 128; 
     for (n = 0; n < len; n++) { 
      coords[n] = areas[n].coords.split(','); 
     } 
     this.resize = function() { 
      var n, m, clen, 
       x = img.offsetWidth/previousWidth; 
      for (n = 0; n < len; n++) { 
       clen = coords[n].length; 
       for (m = 0; m < clen; m++) { 
        coords[n][m] *= x; 
       } 
       areas[n].coords = coords[n].join(','); 
      } 
      previousWidth = document.body.clientWidth; 
      return true; 
     }; 
     window.onresize = this.resize; 
    }, 
    imageMap = new ImageMap(document.getElementById('map_ID'), document.getElementById('img_ID')); 
imageMap.resize(); 
return;

}

來源

2017-07-29 bhartsb

您可否詳細介紹一下？在帕格相關的問題中，我通常希望至少有一些帕格代碼：如何在模板中的第二個片段中包含您列出的腳本？也許還可以激發你爲什麼使用帕格 - 從我在這裏可以看到，沒有直接需要它。最後，請更詳細地說明 - 究竟哪一個不能像你期望的那樣工作 - 腳本是不是被調用的？或者它被稱爲，但表現出一些意想不到的行爲？ – gandreadis

這就是我要求的人給出一個如何正確包含它的例子。作爲Jade的新用戶，我不知道它甚至被稱爲帕格。我認爲它在'head'下的layout.jade中包含了哪些內容。作爲一個新用戶，它看起來像一個令人難以置信的壞名字'帕格'，因爲擴展名仍然是'.jade'我可以在http://jsfiddle.net/加載上面的代碼，並且看到它的工作原理，但我無法得到它使用帕格工作！我會補充說，空格或製表符的要求看起來非常脆弱。 – bhartsb

要求'腳本'。沒有前面的空間也是絆倒新用戶的好方法。 – bhartsb

要知道，沒有了之前容許空間 '腳本'。使用空格或製表符，但不能同時使用兩個。 Jade/Pug對此非常挑剔。我不會在這裏發佈代碼，因爲它使用標籤並且不會格式化。

放置'腳本'。在layout.jade中'head'後面的行中，並按照window.onload JS使用空格或製表符正確縮進。

將html作爲jade標籤放入index.jade中

來源

2017-07-29 23:54:58 bhartsb

如何讓window.onload函數在Jade模板語言中工作

回答

相關問題