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

时间:2015-03-26 13:45:39

标签: javascript jquery html css firefox

我尝试使用引用其他域名的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);
}

这里也是一个小伙伴:

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

1 个答案:

答案 0 :(得分:2)

我并不真正关心这个解决方案,但我所做的是使用ajax读取css并将其直接作为样式添加到页面中。我仍然会对如何使用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);

        }
    });
}