Como adicionar javascript condicional ao tema?


10

Eu gostaria de usar o script Selectivizr para emular os seletores CSS3 no IE6-8.

Mas estou tendo dificuldades para adicioná-lo ao meu tema. Até agora tentei:

1) Forçando isso na seção principal html.tpl.php:

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

Mas base_path () não parece retornar nada em D7 (pelo menos em html.tpl.php - talvez em page.tpl.php ...). E eu sei que essa não é a maneira Drupal de fazê-lo de qualquer maneira.

2) Adicionando ao arquivo .info do meu tema:

scripts[] = selectivizr.js

Mas então é incondicional, é claro :(

3) Usando drupal_add_js () no meu template.php.

Mas, novamente, não tenho certeza de que possa ser configurado condicionalmente lá?

Respostas:


3

Eu acho que o seu 1) é a melhor opção.

Você não precisa chamar nenhuma função, já possui esses valores:

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

Para sua informação, <?php dsm($variables) ?>em qualquer arquivo de modelo para ver quais variáveis ​​estão disponíveis. (com o módulo devel instalado)

Existe um módulo Folhas de estilo condicionais que possui uma solução elegante para adicionar condições do IE no arquivo .info, mas ainda apenas para CSS. (consulte solicitação de recurso para JS)


15

Foi assim que adicionei html5shiv no meu arquivo 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
Algumas alterações: adicione '#value' e defina-o como '' depois altere '#suffix' para apenas '<! [Endif] ->' para obter uma marcação compatível com os padrões.
Angry Dan

Editado na sugestão de @ AngryDan.
wizonesolutions

1

Eu pensei que isso estava cozido, mas estava errado.

Parece que o tema da nave - mãe usa essa bibliotecária.

Ele faz as coisas um pouco diferente de você, mas essencialmente faz sua opção 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 esse código não funcionará se seu site não estiver em /

Mas se a biblioteca for necessária para o seu tema, não vejo problema em colocar o código condicional no arquivo page.tpl.php.


Você pode alterar o caminho das bibliotecas codificadas permanentemente para usar libraries_get_path () se estiver usando a API das bibliotecas ou drupal_get_path () se não estiver.
masterchief


0

Se o seu arquivo JS não tiver dependências, ele poderá ser incluído assim na tag principal do 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');

Se você tem, digamos, dependência do jQuery, faz sentido colocar seu código na parte inferior da 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]-->',
    )     
  );
}

Há uma tag de script extra no seu primeiro bloco de código, na chave #suffix.
precisa saber é o seguinte
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.