Internet Explorer 8和getElementsByTagName（'script'）无法正常工作

Question

Another user suggested a function for converting a string to dom elements then iterating through the string and executing the js. It works fine just not in IE8, surprising.

function get_script_src_from_string (INPUT_STRING) {

  var tempDiv = document.createElement('div');
  tempDiv.innerHTML = INPUT_STRING;

  var scripts = tempDiv.getElementsByTagName('script');
  var script_urls = [];
  for (var i=0; i<scripts.length; i++) {
    script_urls.push(scripts[i].src);
  }
  return script_urls;

}

I am simply passing in a test string:

get_script_src_from_string('<div class="tester" id="tester"><script id="tester2" type="text/javascript">alert("test");</script></div>');

If I do a test with

var test = tempDiv.getElementsByTagName('*');
alert(test.length);

All browsers return 2, ie8 returns 1, so it is not recognizing script as a tag. Using jquery for this project is not an option unfortunately.

Answer 1

function get_script_src_from_string (INPUT_STRING) {

  var frag = document.createDocumentFragment();

  var tempDiv = frag.appendChild( document.createElement('div'));
  tempDiv.innerHTML = 'X' + INPUT_STRING;

  var scripts = tempDiv.getElementsByTagName('script');
  var script_urls = [];
  for (var i=0; i<scripts.length; i++) {
    script_urls.push(scripts[i].src);
  }
  return script_urls;

}

Adding a character before the input string and creating a doc fragment seems to work on IE8 and all other real browsers.

Answer 2

According this other post , using innerHTML detaches all Dom nodes for that element, ie the nodes are there but the DOM doesn't update to recognize those nodes. A solution would be to use appendChild, which should update the DOM and make those elements accessible via getElementsByTagName.

Answer 3

Here is the whole function I am using incase I missed something, check if jquery exists, if not use a native js append. TODO: put in a fix for certain tag names besides script like style.

_append = function(selector, d) {
  if(typeof(selector)=='string') selector =_select(selector);
  if(typeof(selector)!='object'||typeof(d)!='string') {
    return false;
  }
  if(typeof(jQuery)=='function') return (jQuery(selector).append(d)||false); // jQuery available
  var content = d;
  content = Array.prototype.concat( [], content );

  if(content.length) {

    var frag = document.createDocumentFragment();

    var tmp = frag.appendChild( document.createElement('div'));

    tmp.innerHTML = 'X' + content;

    var scripts = tmp.getElementsByTagName('script');
    // Append html.
    if(selector) {
      selector.insertAdjacentHTML('beforeend', content);
    } else {
      console.log('Invalid selector provided.');
    }
    for(var i=0; i<scripts.length; i++) {
      var newScript = document.createElement('script');
      if(scripts[i].id) {
        newScript.id = scripts[i].id;
      }
      if(scripts[i].src) {
        newScript.type = 'text/javascript';
        newScript.src = scripts[i].src;
        document.getElementsByTagName('head')[0].appendChild(newScript)
      } else {
        var nscript = document.createElement('script');
        var js = scripts[i].innerHTML;
        nscript.text = js;
        document.getElementsByTagName('head')[0].appendChild( nscript ).parentNode.removeChild( nscript );
      }
    }
  }
};