条件付きJavaScriptをテーマに追加する方法


10

IE6-8でCSS3セレクターをエミュレートするためにSelectivizrスクリプトを使用したいと思います。

しかし、テーマに追加するのに苦労しています。これまでに試した:

1)これをhtml.tpl.phpヘッドセクションに強制します。

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

しかし、base_path()はD7では何も返さないようです(少なくともhtml.tpl.phpで-多分page.tpl.phpで...)。とにかく、これがDrupalの方法ではないことはわかっています。

2)テーマの.infoファイルに追加:

scripts[] = selectivizr.js

しかし、それはもちろん無条件です:(

3)私のtemplate.phpでdrupal_add_js()を使用します。

しかし、繰り返しになりますが、条件付きで設定できるかどうかはわかりませんか?

回答:


3

私はあなたの1)が最良の選択だと思います。

関数を呼び出す必要はありません。すでにこれらの値を持っています。

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

<?php dsm($variables) ?>参考までに、どのテンプレートファイルで、どの変数が利用可能かを確認してください。(develモジュールがインストールされている場合)

.infoファイルにIE条件を追加するためのエレガントなソリューションを備えた、ただしCSS専用のモジュールConditional Stylesheetsがあります。(JSの機能リクエストを参照)


15

これは、私がtemplate.phpファイルにhtml5shivを追加した方法です。

$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
いくつかの変更: '#value'を追加して ''に設定し、次に '#suffix'を '<![endif]->'に変更して、標準に準拠したマークアップを取得します。
Angry Dan

@AngryDanの提案で編集されました。
wizonesolutions 2014

1

これは焼き込まれていると思ったが間違っていた。

以下のように見えます母船のテーマは、このlibrabryを使用しています。

それはあなたとは少し違うことをしますが、本質的にあなたのオプションを行います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]-->';

サイトが/の下にない場合、このコードは機能しないようです

しかし、テーマにライブラリが必要な場合は、条件付きコードをpage.tpl.phpファイルに配置することに問題はありません。


ライブラリapiを使用している場合はハードコードされたライブラリパスを変更してlibraries_get_path()を使用し、使用していない場合はdrupal_get_path()を使用します。
マスターチーフ2013


0

JSファイルに依存関係がない場合は、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');

jQuery依存関係があるとしましょう。コードをページの下部に配置することは理にかなっています。

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

最初のコードブロックの#suffixキーに追加のスクリプトタグがあります。
Pol Dellaiera 2017
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.