Question

我使这个函数从数组加载内联javascript，html和外部javascript，它似乎适用于所有浏览器，但偶尔在ie9和ie10中加载内部js和html但不加载外部文件。

// Append js and html.
function _append(selector, arr) {
    var content = arr;
    for(var i = 0; i< content.length; i++) {
        var _content = content[i];
        var js = _content.indexOf('script');
        if(js > -1) {
            // Script tag.
            var script = document.createElement('script');
            script.type = 'text/javascript';
            var regex = /<script.*?src="(.*?)"/gmi;
            var url = regex.exec(_content);
            var inline = '';
            if(url) {
                script.src = url[1];
            }
            _content.replace(/<script[^>]*>([\s\S]*?)<\/script>/gi, function(){
                inline += arguments[1] + '\n';
            });
            script.text = inline;
            selector.appendChild(script);
        } else {
            // html content.
            selector.innerHTML += _content;
        }
    }
}
// Selector - div or tag.
var selector = document.body;

// Array with inline and external javascript.
var arr = [];
// Inline javascript.
arr.push('<script>alert("inline javascript");</\script>');
arr.push('<script>alert("more inline javascript");</\script>');
// External script.
arr.push('<script type="text/javascript" src="http://chrismills.la/test.js"></\script>');
// html.
arr.push('<p>Content.</p>');
arr.push('<p>More Content.</p><p>More Content 2.</p>');

_append(selector, arr);

Answer 1

这似乎甚至在IE8中也有效。基本上为内联脚本和eval（）该脚本的.text创建一个脚本元素。然后使用document.write附加外部脚本，但转义＆lt; / script＆gt;。这些函数可以使用一些清理，但希望有人发现这很有用。

// Append js.
function _appendJS(jsobj, d, selector) {
    var _content = d;
    var _selector = selector;
    var _jsobj = jsobj;
    // Create script tag for inline js.
    if(_jsobj.inline) {
        var script = document.createElement('script');
        script.type = 'text/javascript';
        script.text = _jsobj.inline;
      document.getElementsByTagName("body")[0].appendChild(script);
    }
    // Write urls for external js.
    if(_jsobj.urls) {
        for(var i=0; i<_jsobj.urls.length; i++) {
            var _url = _jsobj.urls[i];
            var script = document.createElement('script');
            script.type = 'text/javascript';
            script.src = _url;
            document.getElementsByTagName("body")[0].appendChild(script);
        }
    }
    // Append html content.
    _appendHTML(_content, _selector);
}

// Append html.
function _appendHTML(d, selector) {
    if(selector) {
        selector.innerHTML += d;
    } else {
        console.log('Invalid selector provided.');
    }
}

// Append.
function _append(d, selector) {
    var content = d;
    var js = content.match(/<script/g);
    // Javascript and html.
    if(js) {
        var urls = [];
        var inline = '';
        var regInline = /<script[^type="(.*?)">]*>([\s\S]*?)<\/script>/gmi;
        var regSrc = /<script.*?src="(.*?)"><\/script>/gmi;
        // Extract inline javascript.
        content = content.replace(regInline, function(){
            inline += arguments[1] + '\n';
            return '';
        });
        // Extract external javascript urls.
        content = content.replace(regSrc, function(){
            urls.push(arguments[1]);
            return '';
        });
        var jsobj = {
            'inline': inline,
            'urls': urls
        }
        _appendJS(jsobj, content, selector)
    // Html.
    } else {
        _appendHTML(content, selector);
    }
}

var selector = document.getElementById('content');

var d = '<script>alert("inline javascript 1");</\script><h1>html only</h1><h2>subtitle.</h2><script>alert("inline javascript 2");</\script><script>alert("inline javascript 3");</\script><script type="text/javascript" src="http://chrismills.la/test.js"></\script><script>alert("more inline javascript");</\script><p>More Content.</p>';

_append(d, selector);

由javascript加载的外部javascript有时无法在IE中运行

1 个答案: