1

I know it has been discussed here several times, but:

Is there a way to include conditional JS from CDN in the head section?

My goal is to somehow use drupal_add_js, external. That will stick in the head area, even if I move scripts to the bottom of the page. It is about html5shiv and respond.js

The classic way to add js was discussed here and here. So what I've managed so far is to bring

<?php
function THEMENAME_preprocess_html(&$variables) {
    drupal_add_js('https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.2/html5shiv.js', 'external');
    drupal_add_js('https://cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.min.js', 'external');
}

The problem is conditional. One way to add conditional elements, with drupal_add_js. I know how to load local conditional js, using a variable I'm creaing in template.php, like so:

<?php
$html5shiv = array(
    '#tag' => 'script',
    '#attributes' => array(
        'src' => file_create_url(drupal_get_path('theme', 'THEMENAME') . '/js/html5shiv.js'),
    ),
    '#prefix' => '<!--[if lte IE 9]>',
    '#suffix' => '</script><![endif]-->'
);
drupal_add_html_head($html5shiv, 'html5shiv');

But this will only put the conditional JS even before the meta title element and I need this to be loaded at the end of my section, JUST BEFORE my scripts loaded from theme.info (scripts[] = js/main.js). And of course, this will load local JS, not external.

Any ideas?

0

The Boilerplate theme does it for CSS by adding to template.php in the theme:

function boilerplate_preprocess_html(&$vars) {
  if (!module_exists('conditional_styles')) {
    boilerplate_add_conditional_styles();
  }
}

function boilerplate_add_conditional_styles() {
  // Make a list of base themes and the current theme.
  $themes = $GLOBALS['base_theme_info'];
  $themes[] = $GLOBALS['theme_info'];
  foreach (array_keys($themes) as $key) {
    $theme_path = dirname($themes[$key]->filename) . '/';
    if (isset($themes[$key]->info['stylesheets-conditional'])) {
      foreach (array_keys($themes[$key]->info['stylesheets-conditional']) as $condition) {
        foreach (array_keys($themes[$key]->info['stylesheets-conditional'][$condition]) as $media) {
          foreach ($themes[$key]->info['stylesheets-conditional'][$condition][$media] as $stylesheet) {
            // Add each conditional stylesheet.
            drupal_add_css(
              $theme_path . $stylesheet,
              array(
                'group' => CSS_THEME,
                'browsers' => array(
                  'IE' => $condition,
                  '!IE' => FALSE,
                ),
                'every_page' => TRUE,
              )
            );
          }
        }
      }
    }
  }
}

Then added to the .info file:

stylesheets-conditional[lte IE 8][all][]  = css/compiled/ie8.css
stylesheets-conditional[lte IE 7][all][]  = css/compiled/ie7.css
stylesheets-conditional[lte IE 6][all][]  = css/compiled/ie6.css

I'm sure this could be easily adjusted for JavaScript instead

  • There was a huge page talking about the difference between loading CSS and JS. For CSS there's also a module called, Conditional Stylesheets. For example, does JS has a group as JS_THEME? And then again, files here are local. This is not the answer for external JS. – designarti Jun 10 '15 at 10:03
  • Like I said it could be adapted for JavaScript, yes drupal_add_js has a group JS_THEME and can be used for external JS. My answer isn't a complete solution, it;s designed to point you in the right direction. – Colin Shipton Jun 10 '15 at 10:19
  • Thanks. I haven't seen any valid solution for this, yet there are enough advices everywhere, poiting to either a CSS solution, either local conditionals. So far nothing seems to be working. I'll keep digging. – designarti Jun 10 '15 at 10:22
0

drupal_add_js() has a bunch of options you can pass along, including ones for weight, and browsers. You might have to play around with the weight a bit to get the desired effect, but something like this should work:

$options = array(
  'type' => 'external',
  'weight' => -100,
  'browsers' => array(
    array('IE' => 'lte IE 9'),
  ),
);
drupal_add_js('https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.2/html5shiv.js', $options);

(the #attached method of adding scripts should be preferred, but the options will still be the same).

You could also use the drupal_add_html_head() method, there's an example on the docs page.

Incidentally, you'll probably need to make sure these scripts come literally before any others in the head, as IE8 and below have very specific load behaviour based on the order of conditional scripts. See this for more info.

  • I will try this and get back with a feedback. Thanks! – designarti Jun 10 '15 at 10:00
  • Somehow, although IE array specifies conditional browsers, the conditional statement doesn't show up in the code. Weight is good though, it gets printed just before my JS from the .info file. I've banged my head around this for hours now. I might just print it in html.tpl.php and that's it. – designarti Jun 10 '15 at 10:23

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.