如何让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模板语言中工作

回答

相关问题