Search code examples
javascriptjqueryinternet-explorerinternet-explorer-9internet-explorer-10

.load() function in IE10/9 not working


In the backend (wordpress) I have the user select an icon, then that outputs a string of text. I use the .icons class to search over all the icons and replace what strings it finds with the corresponding svg. It works great, but in IE9/10 the load function doesn't work and the string does not get replaced.

I have read that other people have had a similiar problem, but when trying to implement a similar fix, none work and the string still gets outputed [ CSS Tricks, Another Stack Question ].

I haven't had any luck so far so was wondering if anyone could give me better insight.

JS / JQuery

function icons() {
  $('.icons').each(function() {
    var counter = 0;
    var select =  $(this).html();
    var url = location.origin;
    var path = "/wp-content/themes/Proxy-Engine/dist/assets/icons/svg/";
    var ext = ".svg";
    var icon = url+path+select+ext;
    $(this).load(icon, null, function() {
      $('.icons svg g').removeAttr('stroke');
    });
    var loc = location.origin;
    $(this).html(select)
  });
}

Solution

  • IE9/10 does not support window.location.origin. I removed url from var icon, and made it a relative path.

    Thanks everyone for the help.

    function icons() {
      $('.icons').each(function() {
        var counter = 0;
        var select =  $(this).text();
        var path = "/wp-content/themes/Proxy-Engine/dist/assets/icons/svg/";
        var ext = ".svg";
        var icon = path+select+ext;
        $(this).load(icon, function() {
          $('.icons svg g').removeAttr('stroke');
        });
      });
    }