在做Drupal开发的时候，经常会遇到添加JavaScript，本文将以Drupal7下版本为例，介绍Drupal 中添加 JavaScript 的几种方法，供您参考！

1. 前端所有页面添加JavaScript

这种通常推荐在当前主题目录的.info文件里添加，比如我们当前的主题是drupalchina，想添加一个script.js的JS文件，那么我们就在drupalchina.info 文件里添加如下代码：

; Add javascript to current theme
scripts[] = js/script.js

备注：这里我们是添加了一个script.js至主题下的js文件夹里。合理组织主题目录下的文件，对于代码管理极有帮助。比如主题目录是这样：sites/all/themes/drupalchina。通常我们会将 JavaScript 放置到 “js”目录，CSS文件文件放置在“css”目录，图片文件放置在“images”目录，模板文件（*.tpl.php）放置在“templates”目录，等等。

2. 在前端指定页面或者内容类型下添加JavaScript

2.1 在指定页面添加JavaScript

这也是经常碰到的需求，有时我们只想在指定页面添加某个JavaScript文件，我们一般是建议添加到template.php这个文件里，目录位置：sites/all/themes/drupalchina/template.php。

向前端的主题页面添加CSS、JS，除了方法1中的建议在info文件里加外，另一种也是像这个方法里介绍的，在template.php中添加。对主题比较熟悉的朋友，应该知道template.php里通常是用来放一些针对主题方面的覆写函数或者自定义函数。这些覆写的函数，其实就是根据Drupal内核提供的一些HOOK，进行有规律性的覆写。这里需要介绍的一个HOOK，那就是“HOOK_preprocess_HOOK”，详细介绍可以参考官网API，而这里，我们需要覆写的更具体的，通常是建议覆写“HOOK_preprocess_html”。

示例代码如下：

/**
* Implementation of hook_preprocess_HOOK().
*/
function drupalchina_preprocess_html(&$vars) {
  $options = array(
    'group' => JS_THEME,
  );

  //Get the requested URL path of the page being viewed
  $request_path = request_path();
  if (in_array($request_path, array('page1', 'page2', 'page3'))) {
    drupal_add_js(drupal_get_path('theme', 'drupalchina') .'/mypage.js', 'file');
  }

}

关于drupal_add_js的具体介绍和用法，请参看这里。

2.2 在指定内容类型页面添加JavaScript

在article类型下加入css和js的方法：

/**
* Implementation of hook_preprocess_HOOK().
*/

function drupalchina_preprocess_page(&$vars) {
  if(!empty($vars['node'])){
    if ($vars['node']->type == 'article'){
      drupal_add_css(path_to_theme() . '/css/article.css');
      drupal_add_js(path_to_theme() .'/js/article.js', 'file');
    }
  }
}

2.3 在分类页面添加指定的CSS：

你可以使用menu_get_object() 来判断：

$term = menu_get_object('taxonomy_term', 2);
if ($term) {
  // User is on a taxonomy term page
}

3. 在区块里添加JavaScript

在区块中添加JS，可以用两种方式来实现，但是需要先启用核心的PHP filter模块。

1. 方法一，开启PHP filter模块后，新建一个区块，然后文本格式选择“PHP code”，将你的JS代码直接贴入，或者使用php的方式，drupal_add_js也可以。
2. 方法二，开启PHP filter模块后，新建一个区块，然后覆写这个区块的block tpl模块，加入到模板文件里。这样做的好处是，有时会在测试或者不小心的时候，输错了代码可能会导致白屏或者页面出错，从而后台也无法进入，这时只需修改tpl的代码即可还原。

4. 在模块里添加JavaScript

在模块里添加JavaScript的方法和主题中类似。比如，如果想让该模块启用后，需要在所有页面添加某个JS，那么，可以在模块的info文件 里添加JS，但是通常不建议这样做。因为这种方式，会让模块启用后就会在页面加载JS，而我们通常是希望在页面需要的再加载。一般我们推荐采用hook_init()这种方式来加载。

例如：Drupal猎人开发的Ueditor模块中：

/**
 * Implementation of hook_init().
 */
function ueditor_init() {
	if(module_exists('libraries')){
		$lib_path = libraries_get_path('ueditor');
		drupal_add_css($lib_path . '/themes/default/css/ueditor.css');
	}
	drupal_add_js(drupal_get_path('module', 'ueditor') . '/js/ueditor.toolbars.js');

	// Load SyntaxHighlighter js and css.
	if(variable_get('ueditor_highlighting_format') == 1){
		drupal_add_css($lib_path . '/third-party/SyntaxHighlighter/shCoreDefault.css');
		drupal_add_js($lib_path . '/third-party/SyntaxHighlighter/shCore.js', array('weight' => -1));
		drupal_add_js('SyntaxHighlighter.all();', array('type' => 'inline', 'scope' => 'footer', 'weight' => 5));
	}
}

5. 基于Libraries api模块添加JavaScript

Libraries api 是一个可以引入第三方库的模块，第三方库有jQuery插件、php语言编写的库、java语言编写的库等。基于这个模块，引入第三方库很方便，只需使用drupal_add_library()这个方法就可以引入第三方库的文件（可以加载CSS、JS以及需要调用对应的图片等）。

使用这个方法一般步骤如下：

1. 下载libraries api模块，放至“sites/all/modules”目录。
2. 下载第三方库，放至“sites/all/libraries”目录（备注：如果调用jQuery UI库，因该库已加入Drupal7 核心，所以不需要再单独下载，可以忽略此步）。
3. 在你需要调用JS的地方，使用drupal_add_library()来调用。 比如，我们想调用jQuery UI的tabs插件，如果是想在前台主题下调用，我们就可以在你的主题的templates.php中的HOOK_preprocess_page()里加入如下代码：

   //“mytheme” 请改为你的主题名字
   function mytheme_preprocess_page($vars) {
     //prefix code
     drupal_add_library('system', 'ui.tabs');
     //suffix code
   }

   在自定义模块中加入的话，可以这样：

   //“mymodule”名字请改为你的模块名字
   function mymodule_init() {
           drupal_add_library('system', 'ui.tabs');
   }

6. 添加统计代码

（待续）

参考文章：

• https://www.drupal.org/node/756722
• https://www.drupal.org/node/542202#scripts
• http://wearepropeople.com/blog/7-ways-to-add-custom-js-and-css-to-a-page-in-drupal