Add conditional javascript from CDN (external library)

Question

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?

Answer 1

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

Answer 2

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.