7.2 在主题中引入JS
7.2.1 使用.info文件添加js
在dp中引入js最简单的方法是在.info文件中进行声明。这里就不重复叙述了，但是你应该记住两点：第一，用这个方法添加的js会出现在网站的所有页面上，因此，要考虑性能问题。第二，用这个方法添加的js是主题层的js，当drupal页面加载的时候，drupal会首先加载库js（core/library）和模块js，然后才加载主题js。
或者，你也可以用JS Injector 模块来执行这个动作，官网地址：https://www.drupal.org/project/js_injector。
7.2.2 从template.php中加载js
在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，以下只给出一些例子。
比如，你的根目录下有一个名为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');
}
}
下面还有一些例子，看得懂的就看，我就不解释了，事实证明，教程不能写得太详细，不然就会有那种连<p>是什么都不知道的人说你的教程写得太乱了，然后帮你出个整理版。
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(...);
}
}
?>
7.2.3 Js的加载顺序
在Drupal中引入JS的时候，你可以用表示权重的“group”来控制JS在页面上的载入顺序，以下是你可以在"group"中使用的常数：
JS_LIBRARY: JS库，设置（settings），jQuery插件
JS_DEFAULT:模块层JS
JS_THEME: 模版层JS
Drupal页面加载JS的顺序是：先加载JS_LIBRARY，然后加载JS_DEFAULT，最后是JS_THEME。
当你使用drupal_add_js引入JS的时候，你可以使用类似下面的代码来控制JS的加载顺序：
<?php
drupal_add_js(
'jQuery(document).ready(function () { alert("Hello!"); });',
array(
'type' => 'inline',
'scope' => 'footer',
'group' => JS_THEME,
'weight' => 5,
)
);
?>