7.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,以下只简单介绍并给出一些例子。

当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(...);
 
  }
 
}
 
?>

本书共55小节:

评论 (写第一个评论)