寻求script标签crossorigin属性的IE11兼容Polyfill

Hey there, great question! Let's cut to the chase: there's no official or widely adopted polyfill for the crossorigin script attribute in IE11, and for good reason—this attribute ties directly into the browser's low-level handling of cross-origin resource sharing (CORS), which is baked into the browser's networking stack. Polyfills can't replicate that kind of core browser behavior.

But don't worry—there are solid workarounds to achieve the same goal while supporting IE11. Here are your best options:

Option 1: Host Scripts on the Same Domain #

If you have control over where your scripts are hosted, the simplest fix is to serve them from the same domain as your main web page. This avoids the need for the crossorigin attribute entirely, since same-origin requests don't trigger CORS checks. IE11 (and all browsers) handle this seamlessly.

Option 2: Load Scripts via XMLHttpRequest (XHR) #

If you must load scripts from a cross-origin domain, you can manually fetch the script content using XHR (which IE11 supports) and inject it into the DOM as an inline script. Here's how to do it safely:

Step-by-Step Implementation #

// Function to load cross-origin scripts with IE11 support
function loadCrossOriginScript(url, onSuccess, onError) {
  var xhr = new XMLHttpRequest();
  xhr.open('GET', url, true);

  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4) {
      if (xhr.status === 200) {
        // Create a script element and inject the fetched content
        var script = document.createElement('script');
        script.textContent = xhr.responseText;
        document.head.appendChild(script);

        // Trigger success callback if provided
        if (typeof onSuccess === 'function') {
          onSuccess();
        }
      } else {
        // Handle non-200 status codes
        if (typeof onError === 'function') {
          onError(new Error('Failed to load script: HTTP status ' + xhr.status));
        }
      }
    }
  };

  // Handle network errors
  xhr.onerror = function() {
    if (typeof onError === 'function') {
      onError(new Error('Network error while loading script: ' + url));
    }
  };

  xhr.send();
}

// Example usage
loadCrossOriginScript(
  'https://your-external-cdn.com/your-script.js',
  function() {
    console.log('Script loaded and executed successfully!');
  },
  function(error) {
    console.error('Script load failed:', error.message);
  }
);

Key Notes for This Approach #

• CORS Headers Required: The external server must send valid CORS headers (like Access-Control-Allow-Origin: * or your specific domain) for this to work. IE11 will block the XHR request if these headers are missing.
• Avoid document.write: If your script uses document.write, this method might break it—inline scripts injected this way run after the initial page parse, so document.write won't behave as expected.
• Error Handling: Unlike native script tags, this method gives you explicit control over error states, which can be helpful for debugging in IE11.

Option 3: JSONP (Not Recommended for Scripts) #

In a pinch, you could use JSONP to load script content, but this is a last resort. JSONP has significant security risks (it executes arbitrary code) and only works with GET requests. It's better suited for data APIs, not loading application scripts.

Final Takeaway #

Since polyfills for crossorigin aren't feasible, your best bets are either hosting scripts locally or using the XHR injection method. Both approaches will work reliably in IE11 while maintaining the cross-origin functionality you need.

内容的提问来源于stack exchange，提问作者Jules