上海戴文 - Drupal开发 在线教育

你在这里

Drupal 中添加 JavaScript 的方法总结

主标签

在做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
Drupal 版本: 

猜你喜欢

https://drupal.fleeto.us/translation/adding-js-libraries-drupal-project-libraries-api

Libraries API方式smiley

当初有这篇该多好

今年做单位网站的时候,想把原图片幻灯直接搬到drupal里,但是不知道怎么搞,搜到的说法是龙马的第一个方法,但是没成功,后来只好深入下去,还好有slideshow这个模块。

网站上线有两个月了,是该继续深入的时候了!加油,drupal!

龙马是个好人,也是个人才,以后还得多向你学习啊,前几天自己找了一个css injector,虽然用着也行,但就是别扭,这个文章太好了

第一次接触drupal,看似很不错的系统


 

高手就是高手,但有个小问题:

调用JS后会调用多次,我的测试中有Alert(1),它弹出三次了。不知道要怎么搞,我的JS:

(function ($) {
  Drupal.behaviors.sample_barcode_print = {
    attach: function (context, settings) {
		var data=Drupal.settings.sample_barcode_print.testdata;

              alert(0);


}
  };

}(jQuery));

 

这个要怎么处理?