从innerHTML执行(Java Script)标签

将脚本元素替换为具有class="javascript"类属性的div，并以</div>关闭

不要改变你想要执行的内容(以前是在script标签，现在是在div标签)

在你的页面中添加一个样式…

<style type="text/css"> .javascript {display: none;} > < /风格

现在使用jquery运行eval (jquery js应该已经包含在内)

   $('.javascript').each(function() {
      eval($(this).text());

    });`

你可以在我的博客上探索更多。

下面是一个递归地将所有脚本替换为可执行脚本的方法:

function nodeScriptReplace(node) {
        if ( nodeScriptIs(node) === true ) {
                node.parentNode.replaceChild( nodeScriptClone(node) , node );
        }
        else {
                var i = -1, children = node.childNodes;
                while ( ++i < children.length ) {
                      nodeScriptReplace( children[i] );
                }
        }

        return node;
}
function nodeScriptClone(node){
        var script  = document.createElement("script");
        script.text = node.innerHTML;

        var i = -1, attrs = node.attributes, attr;
        while ( ++i < attrs.length ) {                                    
              script.setAttribute( (attr = attrs[i]).name, attr.value );
        }
        return script;
}

function nodeScriptIs(node) {
        return node.tagName === 'SCRIPT';
}

示例调用:

nodeScriptReplace(document.getElementsByTagName("body")[0]);

Gabriel Garcia提到的mutationobserver是正确的，但对我来说不太管用。我不确定这是因为浏览器的怪癖还是因为我自己的错误，但最终适合我的版本是:

document.addEventListener("DOMContentLoaded", function(event) {
    var observer = new MutationObserver(mutations=>{
        mutations.map(mutation=>{
            Array.from(mutation.addedNodes).map(node=>{
                if (node.tagName === "SCRIPT") {
                    var s = document.createElement("script");
                    s.text=node.text;
                    if (typeof(node.parentElement.added) === 'undefined')
                        node.parentElement.added = [];
                    node.parentElement.added[node.parentElement.added.length] = s;
                    node.parentElement.removeChild(node);
                    document.head.appendChild(s);
                }
            })
        })
    })
    observer.observe(document.getElementById("element_to_watch"), {childList: true, subtree: true,attributes: false});
};

当然，您应该将element_to_watch替换为要修改的元素的名称。

node.parentElement.added用于存储添加到document.head的脚本标记。在用于加载外部页面的函数中，您可以使用如下内容删除不再相关的脚本标记:

function freeScripts(node){
    if (node === null)
        return;
    if (typeof(node.added) === 'object') {
        for (var script in node.added) {
            document.head.removeChild(node.added[script]);
        }
        node.added = {};
    }
    for (var child in node.children) {
        freeScripts(node.children[child]);
    }
}

这是一个load函数开始的例子:

function load(url, id, replace) {
    if (document.getElementById(id) === null) {
        console.error("Element of ID "+id + " does not exist!");
        return;
    }
    freeScripts(document.getElementById(id));
    var xhttp = new XMLHttpRequest();
    // proceed to load in the page and modify innerHTML
}

我有这个问题与innerHTML，我不得不追加一个Hotjar脚本的“头部”标签我的Reactjs应用程序，它将必须立即执行追加后。

将动态节点导入“head”标签的一个很好的解决方案是React-helment模块。

此外，对于所提出的问题，还有一个有用的解决方案:

在innerHTML中没有脚本标记!

事实证明，HTML5不允许使用innerHTML属性动态添加脚本标记。因此，下面的代码将不会执行，也不会出现Hello World!

element.innerHTML = "<script>alert('Hello World!')</script>";

这在HTML5规范中有记录:

注意:使用innerHTML插入的脚本元素不执行时 它们是插入的。

但是要注意，这并不意味着innerHTML不受跨站点脚本的影响。可以通过innerHTML执行JavaScript，而不使用MDN的innerHTML页面上所示的标记。

解决方案:动态添加脚本

要动态添加脚本标记，您需要创建一个新的脚本元素并将其附加到目标元素。

你可以为外部脚本这样做:

var newScript = document.createElement("script");
newScript.src = "http://www.example.com/my-script.js";
target.appendChild(newScript);

和内联脚本:

var newScript = document.createElement("script");
var inlineScript = document.createTextNode("alert('Hello World!');");
newScript.appendChild(inlineScript); 
target.appendChild(newScript);

下面是一个更现代(和简洁)的mmm解决方案:

function executeScriptElements(containerElement) {
  const scriptElements = containerElement.querySelectorAll("script");

  Array.from(scriptElements).forEach((scriptElement) => {
    const clonedElement = document.createElement("script");

    Array.from(scriptElement.attributes).forEach((attribute) => {
      clonedElement.setAttribute(attribute.name, attribute.value);
    });
    
    clonedElement.text = scriptElement.text;

    scriptElement.parentNode.replaceChild(clonedElement, scriptElement);
  });
}

注意:我还尝试过使用cloneNode()或outerHTML的替代解决方案，但没有成功。

单线解决方案如下:

document.getElementsByTagName("head")[0].append(document.createRange().createContextualFragment('<script src="https://google.com/file.js"></script>'));