web-dev-qa-db-fra.com

Comment ajouter du javascript conditionnel au thème?

Je voudrais utiliser le script Selectivizr pour émuler les sélecteurs CSS3 dans IE6-8.

Mais j'ai du mal à l'ajouter à mon thème. Jusqu'ici essayé:

1) Forcer ceci dans la section de tête html.tpl.php:

<!--[if lt IE 9]>
<script src="<?php print base_path() . path_to_theme(); ?>/js/selectivizr.js"></script>
<![endif]-->

Mais base_path () ne semble rien retourner en D7 (au moins dans html.tpl.php - peut-être dans page.tpl.php ...). Et je sais que ce n'est pas la façon Drupal de le faire de toute façon.

2) Ajout au fichier .info de mon thème:

scripts[] = selectivizr.js

Mais alors c'est inconditionnel, bien sûr :(

3) Utilisation de drupal_add_js () dans mon template.php.

Mais encore une fois, je ne suis pas sûr que cela puisse être réglé conditionnellement là-bas?

7themingjavascript
10
pushka

Je pense que votre 1) est la meilleure option.

Vous n'avez pas besoin d'appeler de fonction, vous avez déjà ces valeurs:

<script type="text/javascript" src="<?php print $base_path . $directory; ?>/js/selectivizr.js"></script>

FYI, <?php dsm($variables) ?> dans n'importe quel fichier modèle pour voir quelles variables sont disponibles. (avec le module de développement installé)

Il existe un module Feuilles de style conditionnelles qui a une solution élégante pour ajouter des conditions IE dans le fichier .info, mais toujours uniquement pour CSS. (Voir fonctionnalité demande pour JS)

3
corbacho

Voici comment j'ai ajouté html5shiv dans mon fichier template.php:

$html5shiv = array(
  '#tag' => 'script',
  '#attributes' => array( // Set up an array of attributes inside the tag
    'src' => drupal_get_path('theme', 'mythemename') . '/js/lib/html5shiv.js', 
  ),
  '#prefix' => '<!--[if lte IE 8]>',
  '#suffix' => '</script><![endif]-->',
);
drupal_add_html_head($html5shiv, 'html5shiv');
15
jpatiaga

Si votre fichier JS n'a pas de dépendances, il peut être inclus comme ceci dans la balise head de HTML:

$selectivizr = array(
  '#tag' => 'script',
  '#attributes' => array(
    'src' => file_create_url(drupal_get_path('theme', 'theme_name') . '/js/lib/selectivizr.js'),
  ),
  '#prefix' => '<!--[if lte IE 9]>',
  '#suffix' => '</script><![endif]-->'
);
drupal_add_html_head($selectivizr, 'selectivizr');

Si vous avez, disons, une dépendance jQuery, il est logique de mettre votre code en bas de la page:

function THEMENAME_preprocess_html(&$vars){
  $vars['page']['page_bottom']['jquery_dependent_js'] = array(
    'footer' => array(
      '#type' => 'markup',
      '#markup' => '<!--[if lte IE 9]><script src="' .
        file_create_url(drupal_get_path('theme', 'theme_name') . '/js/lib/jquery_dependent_js.js'). '"></script><![endif]-->',
    )     
  );
}
1
Sergey Semashko

Je pensais que c'était cuit mais c'était faux.

Il semble que le thème vaisseau-mère utilise cette librabry.

IL fait les choses un peu différemment de vous mais fait essentiellement votre option 1

  $vars['selectivizr'] = '<!--[if (gte IE 6)&(lte IE 8)]>';
  $vars['selectivizr'] .= '<script type="text/javascript" src="/sites/all/libraries/selectivizr/selectivizr.js"></script>';
  $vars['selectivizr'] .= '<![endif]-->';

Il semble que ce code ne fonctionnera pas si votre site n'est pas sous /

Mais si la bibliothèque est nécessaire pour votre thème, je ne vois aucun problème à mettre le code conditionnel dans le fichier page.tpl.php.

1
Jeremy French

J'utiliserais drupal_add_html_head () dans votre template.php. Malheureusement, # 865536: drupal_add_js () n'a pas l'option 'navigateurs'

1
Dylan Tack