Comment ajouter du javascript conditionnel au thème?


10

J'aimerais 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?

Réponses:


3

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>

Pour info, <?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 la demande de fonctionnalité pour JS)


15

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');

4
Quelques modifications: ajoutez «#value» et définissez-le sur «», puis changez «#suffix» pour qu'il soit simplement «<! [Endif] ->» pour obtenir un balisage conforme aux normes.
Angry Dan

Modifié dans la suggestion de @ AngryDan.
wizonesolutions du

1

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

Il semble que le thème du 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.


Vous pouvez changer le chemin d'accès des bibliothèques codées en dur pour utiliser bibliothèques_get_path () si vous utilisez l'api des bibliothèques, ou drupal_get_path () si vous ne l'utilisez pas.
masterchief


1

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]-->',
    )     
  );
}

Il y a une balise de script supplémentaire dans votre premier bloc de code, dans la clé #suffix.
Pol Dellaiera
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.