在Drupal 7的template.php文件中,你可以通过 drupal_add_js() 或者 drupal_add_library()来添加js,d6中就只能使用前者。
关于drupal_add_js的详细内容,请查看官网https://api.drupal.org/api/drupal/includes%21common.inc/function/drupal_add_js/7,以下只简单介绍并给出一些例子。
当CSS/JS聚合功能被开启的时候,通过drupal_add_js加载并将参数preprocess设置为TRUE的JS文件(除了inline的JS语句和外部引用的JS文件)都会被聚合到一个单一的文件中。
参数preprocess的作用就在于,控制CSS/JS聚合功能开启时,某个文件是否被聚合,默认是TURE。然而,需要注意的是,这个默认值往往会引起性能问题。如果一个JS文件不是每个或者大多数页面都需要的,那么无条件的加载这个文件到所有页面上或者开启聚合模式,都会对性能有所伤害。如果每个文件都这么处理的话,性能的损失将非常明显。
比如,你的根目录下有一个名为foo.js的脚本,那么引入的时候就大概是下面这样的:
Drupal 6:
<?php
function example_preprocess_page(&$variables) {
drupal_add_js(drupal_get_path('theme', 'example'). '/foo.js', 'theme');
// We need to rebuild the scripts variable with the new script included.
$variables['scripts'] = drupal_get_js();
}
?>
Drupal 7:
<?php
function example_preprocess_html(&$variables) {
$options = array(
'group' => JS_THEME,
);
drupal_add_js(drupal_get_path('theme', 'example'). '/foo.js', $options);
}
?>
在下面的代码片段,我们先判断当前页面是否为网站首页,如果是,添加js。
function my_theme_preprocess_html(&$variables) {
if (drupal_is_front_page()) {
drupal_add_js(drupal_get_path('theme', 'my_theme') . '/js/my_script.js');
}
}
在上面的代码示例,你需要用你实际的主题机器名来替换'my_theme' , 'js' 是你主题目录中包含js脚本的一个目录,你也可以使用drupal_add_js来为具体的内容类型添加js,比如:
function my_theme_preprocess_node(&$variables) {
if (isset($variables['node']) && $variables['node']->type == 'page') {
// Add js
drupal_add_js(drupal_get_path('theme', 'my_theme') . '/js/scripts.js');
$variables['scripts'] = drupal_get_js();
}
}
这样将添加脚本到内容类型为”page"的所有页面中。
你也可以使用drupal_add_js来添加一个脚本到指定的路径(nid),此例中的路径是 /node/8
function my_theme_preprocess_node(&$variables) {
if(arg(0) == 'node' && arg(1) == '8' && arg(3) == null) {
drupal_add_js(drupal_get_path('theme', 'my_theme') . '/js/custom.js');
}
}
下面还有一些例子,看得懂的就看,我就不解释了。
Javascript direkt einbinden
<?php
drupal_add_js('
(function ($) {
Drupal.behaviors.exampleModule = {
attach: function(context, settings) {
// Hier kann nun wie gewohnt jQuery-Code stehen.
}
};
})(jQuery);
', 'inline');
?>
Eine Javascript-Datei einbinden
<?php
drupal_add_js('/pfad/zur/javascript-datei.js', 'file');
?>
Dieser Code sollte entweder der Datei template.php im aktiven Theme Ordner platziert werden, oder in einem eigenen Modul. Zum Beispiel über hook_init().
<?php
function deinModulName_init() {
// Javascript direkt einbinden
drupal_add_js('
(function ($) {
Drupal.behaviors.exampleModule = {
attach: function(context, settings) {
// Hier kann nun wie gewohnt jQuery-Code stehen.
}
};
})(jQuery);
', 'inline');
// Eine Javascript-Datei einbinden
drupal_add_js( drupal_get_path('module', 'deinModulName') . '/javascript-datei.js', 'file');
}
?>
Weitere Beispiele:
<?php
// Eine Datei einbinden.
drupal_add_js('misc/collapse.js', 'file');
// Inline-JS einbinden.
drupal_add_js('jQuery(document).ready(function () { alert("Hello!"); });', 'inline');
// Inline-JS mit weiteren Optionen einbinden.
drupal_add_js('jQuery(document).ready(function () { alert("Hello!"); });',
array('type' => 'inline', 'scope' => 'footer', 'weight' => 5)
);
// Externes JS einbinden.
drupal_add_js('http://example.com/example.js', 'external');
// JS-Setting einbinden.
drupal_add_js(array('myModule' => array('key' => 'value')), 'setting');
// Eine Library (z.b. jQuery Plugin) einbinden.
drupal_add_js('misc/collapse.js',
array('type' => 'file', 'scope' => 'footer', 'group' => JS_LIBRARY)
);
?>
Javascript auf ausgewählten Seiten einbinden
Wenn man Javascript nur auf einigen Seiten einbinden möchte kann man das zum Beispiel über eine if-Abfrage im hook_init machen.
<?php
function deinModulName_init() {
// Nur auf node/123 einbinden
if (arg(0) == 'node' AND arg(1) == 123) {
// Hier drupal_add_js(...);
}
}
?>