在不同域上动态加载样式 sheet 在 Firefox 中不起作用

Question

我正在尝试使用引用另一个域的 javascript 动态加载 css 和 js。在 IE 和 Chrome 上一切正常，但在 Firefox 中不起作用，我收到以下错误：

InvalidAccessError: A parameter or an operation is not supported by the underlying object

我看过很多关于这个搜索的帖子，但我找不到任何可以真正解决这个问题的解决方案。这是我正在使用的代码。

    // Helper method to add js or css files
function loadjscssfile(filename, filetype){
    var fileref;
    if (filetype=="js"){ //if filename is a external JavaScript file
        fileref=document.createElement('script');
        fileref.setAttribute("type","text/javascript");
        fileref.setAttribute("src", filename);
    }
    else if (filetype=="css"){ //if filename is an external CSS file
        fileref=document.createElement("link");
        fileref.setAttribute("rel", "stylesheet");
        fileref.setAttribute("type", "text/css");
        fileref.setAttribute("href", filename);
    }
    if (typeof fileref!=="undefined")
        document.getElementsByTagName("head")[0].appendChild(fileref);
}

function goMobile() {
// Load bootstrap and jquery 11
var script = document.createElement( 'script' );
script.onload = function () {
    var bootstrap = document.createElement( 'script' );
    bootstrap.onload = function() {
        $jq11 = jQuery.noConflict(true);

        loadjscssfile("https://example.com/inject/bootstrap-overrides.css", "css");

    };
    bootstrap.src = 'https://example.com/applications/bootstrap.min.js';
    document.head.appendChild(bootstrap);   
};
script.src = 'https://example.com/inject/jquery-1.11.2.min.js';
document.head.appendChild(script);
}

这里还有一个 jsfiddle：

https://jsfiddle.net/0py613h6/1/

Answer 1

我不太喜欢这个解决方案，但我所做的是阅读 css 使用 ajax 并将其作为样式直接附加到页面。我仍然对如何或是否可以使用 link 标记从另一个域动态加载 css 感兴趣。这是我的 loadCSS 方法的示例。

function loadCSS(url){

    $jq11.ajax({
        url: url,
        type: 'GET',
        dataType: 'text',
        success: function (data) {
            result = data;
            var css = result,
            head = document.head || document.getElementsByTagName('head')[0],
            style = document.createElement('style');

            style.type = 'text/css';
            if (style.styleSheet){
                style.styleSheet.cssText = css;
            } else {
                style.appendChild(document.createTextNode(css));
            }

            head.appendChild(style);

        }
    });
}

在不同域上动态加载样式 sheet 在 Firefox 中不起作用

Dynamically loading a style sheet on different domain doesn't work in Firefox

html

javascript

css

firefox

jquery