Bagaimana cara menambahkan javascript bersyarat ke tema?


10

Saya ingin menggunakan skrip Selectivizr untuk meniru pemilih CSS3 di IE6-8.

Tapi saya kesulitan menambahkannya ke tema saya. Sejauh ini dicoba:

1) Memaksa ini ke bagian kepala html.tpl.php:

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

Tapi base_path () tampaknya tidak mengembalikan apa pun di D7 (setidaknya dalam html.tpl.php - mungkin di page.tpl.php ...). Dan saya tahu ini bukan cara Drupal untuk melakukannya.

2) Menambahkan ke file .info tema saya:

scripts[] = selectivizr.js

Tapi kemudian itu tanpa syarat, tentu saja :(

3) Menggunakan drupal_add_js () di template.php saya.

Tapi sekali lagi, saya tidak yakin itu bisa diatur secara kondisional di sana?

Jawaban:


3

Saya pikir 1 Anda) adalah pilihan terbaik.

Anda tidak perlu memanggil fungsi apa pun, Anda sudah memiliki nilai-nilai itu:

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

FYI, <?php dsm($variables) ?>dalam file templat apa saja untuk melihat variabel apa yang tersedia. (dengan modul devel diinstal)

Ada modul Lembar Gaya Bersyarat yang memiliki solusi elegan untuk menambahkan kondisi IE dalam file .info, tetapi masih hanya untuk CSS. (lihat permintaan fitur untuk JS)


15

Ini adalah bagaimana saya menambahkan html5shiv di file template.php saya:

$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
Beberapa perubahan: tambahkan '#value' dan setel ke '' lalu ubah '#suffix' menjadi '<! [Endif] ->' untuk mendapatkan markup yang memenuhi standar.
Angry Dan

Diedit dalam saran @ AngryDan.
wizonesolutions

1

Saya pikir ini dipanggang tetapi salah.

Sepertinya tema induk menggunakan librabry ini.

ITU melakukan sesuatu yang sedikit berbeda dari Anda tetapi pada dasarnya melakukan opsi Anda 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]-->';

Sepertinya kode ini tidak akan berfungsi jika situs Anda tidak di bawah /

Tetapi jika perpustakaan diperlukan untuk tema Anda, saya tidak melihat masalah dengan memasukkan kode kondisional ke file page.tpl.php.


Anda bisa mengubah jalur pustaka kode keras untuk menggunakan libraries_get_path () jika Anda menggunakan api pustaka, atau drupal_get_path () jika Anda tidak.
masterchief


1

Jika file JS Anda tidak memiliki dependensi, itu dapat dimasukkan seperti ini di tag kepala 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');

Jika sudah, katakan saja, ketergantungan jQuery, masuk akal untuk meletakkan kode Anda di bawah halaman:

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

Ada tag skrip tambahan di blok kode pertama Anda, di kunci #suffix.
Pol Dellaiera
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.