Jak dodać warunkowy javascript do motywu?


10

Chciałbym użyć skryptu Selectivizr do emulacji selektorów CSS3 w IE6-8.

Ale trudno mi dodać go do mojego motywu. Dotychczas próbowałem:

1) Wymuszenie tego w sekcji nagłówka html.tpl.php:

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

Ale base_path () nie wydaje się zwracać niczego w D7 (przynajmniej w html.tpl.php - może w page.tpl.php ...). I wiem, że i tak nie jest to Drupal .

2) Dodanie do pliku .info mojego motywu:

scripts[] = selectivizr.js

Ale oczywiście jest to bezwarunkowe :(

3) Używając drupal_add_js () w moim template.php.

Ale znowu, nie jestem pewien, czy można tam ustawić warunkowo?

Odpowiedzi:


3

Myślę, że twoja 1) jest najlepszą opcją.

Nie musisz wywoływać żadnej funkcji, masz już te wartości:

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

<?php dsm($variables) ?>Do sprawdzenia , w dowolnym pliku szablonu, jakie zmienne są dostępne. (z zainstalowanym modułem deweloperskim)

Istnieje moduł Warunkowe arkusze stylów, które mają eleganckie rozwiązanie do dodawania warunków IE w pliku .info, ale nadal tylko dla CSS. (patrz żądanie funkcji dla JS)


15

Oto jak dodałem html5shiv do mojego pliku 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
Kilka zmian: dodaj „#value” i ustaw ją na „”, a następnie zmień „#suffix” na po prostu „<! [Endif] ->”, aby uzyskać znaczniki zgodne ze standardami.
Angry Dan,

Edytowane w sugestii @ AngryDan.
wizonesolutions

1

Myślałem, że to było upieczone, ale było złe.

Wygląda na to, że motyw statku- matki korzysta z tej librabry.

IT robi rzeczy trochę inaczej niż ty, ale zasadniczo robi twoją opcję 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]-->';

Wygląda na to, że ten kod nie będzie działać, jeśli witryna nie znajduje się w obszarze /

Ale jeśli potrzebna jest biblioteka dla twojego motywu, nie widzę problemu z umieszczeniem kodu warunkowego w pliku page.tpl.php.


Możesz zmienić ścieżkę do bibliotek kodowanych na stałe, aby używać libraries_get_path (), jeśli korzystasz z bibliotek api, lub drupal_get_path (), jeśli tak nie jest.
masterchief


1

Jeśli twój plik JS nie ma żadnych zależności, można go włączyć w następujący sposób do tagu head 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');

Jeśli masz, powiedzmy, zależność jQuery, sensowne jest umieszczenie kodu na dole strony:

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

W pierwszym bloku kodu znajduje się dodatkowy znacznik skryptu, w kluczu #suffix.
Pol Dellaiera,
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.