¿Cómo agregar JavaScript condicional al tema?


10

Me gustaría usar el script Selectivizr para emular los selectores CSS3 en IE6-8.

Pero me está costando agregarlo a mi tema. Hasta ahora probado:

1) Forzar esto en la sección de encabezado html.tpl.php:

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

Pero base_path () no parece devolver nada en D7 (al menos en html.tpl.php, tal vez en page.tpl.php ...). Y sé que esta no es la forma Drupal de hacerlo de todos modos.

2) Agregar al archivo .info de mi tema:

scripts[] = selectivizr.js

Pero entonces es incondicional, por supuesto :(

3) Usando drupal_add_js () en mi template.php.

Pero, de nuevo, ¿no estoy seguro de que se pueda configurar condicionalmente allí?

Respuestas:


3

Creo que tu 1) es la mejor opción.

No necesita llamar a ninguna función, ya tiene esos valores:

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

Para su información, <?php dsm($variables) ?>en cualquier archivo de plantilla para ver qué variables están disponibles. (con el módulo de desarrollo instalado)

Hay un módulo de hojas de estilo condicionales que tiene una solución elegante para agregar condiciones de IE en el archivo .info, pero aún así solo para CSS. (ver solicitud de función para JS)


15

Así es como agregué html5shiv en mi archivo 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');

44
Un par de cambios: agregue '#value' y configúrelo en '' luego cambie '#suffix' para que sea '<! [Endif] ->' para obtener un marcado que cumpla con los estándares.
Dan enojado

Editado en la sugerencia de @ AngryDan.
wizonesolutions

1

Pensé que esto estaba horneado pero estaba mal.

Parece que el tema de la nave nodriza usa esta librabry.

TI hace las cosas un poco diferente de usted, pero esencialmente hace su opción 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]-->';

Parece que este código no funcionará si su sitio no está bajo /

Pero si la biblioteca es necesaria para su tema, no veo ningún problema al colocar el código condicional en el archivo page.tpl.php.


Puede cambiar la ruta de acceso de las bibliotecas codificadas para usar bibliotecas_get_path () si está utilizando las bibliotecas api, o drupal_get_path () si no lo está.
masterchief


1

Si su archivo JS no tiene dependencias, puede incluirse así en la etiqueta principal 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 tiene, digamos, dependencia de jQuery, tiene sentido poner su código al final de la página:

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

Hay una etiqueta de script adicional en su primer bloque de código, en la tecla #suffix.
Pol Dellaiera
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.