innerHTML 在正文中插入脚本（对于 ZeroClipboard）不起作用答案

【问题标题】：innerHTML to insert script in body (for ZeroClipboard) not workinginnerHTML 在正文中插入脚本（对于 ZeroClipboard）不起作用
【发布时间】：2012-02-27 07:27:19
【问题描述】：

我正在使用 AJAX 构建 <div> 元素，并且我想添加 ZeroClipboard 功能。 Firebug 显示代码正在正确构建，当我将其复制到原始 HTML 测试页面时，它也可以正常工作。构建不是在加载时发生，而是在轨道上。

代码如下，调用了一些创建新元素的函数：

dom_append_child_with_onclick ("img",export_id,"icon_active",report_heading_id, "event.cancelBubble = true;");
dom_append_child ("div",export_script_id,"",report_heading_id);
text = "<script language='JavaScript'>var clip" +rnum +"=new ZeroClipboard.Client();clip"+rnum+".setText('');clip"+rnum+".addEventListener('mouseDown',function(client){alert('firing');clip"+rnum+".setText(document.getElementById('SL40').value);});clip"+rnum+".glue('XR"+rnum+"','RH"+rnum+"');</script>";
document.getElementById(export_script_id).innerHTML=text;

我的问题：当您将脚本插入<body> 时，您是否需要做一些事情才能让它触发？脚本似乎没有做它的事情，我无法显示警报“触发”。

注意：cancelBubble是为了停止底层元素的onClick函数。如果我能让闪光灯工作，那可能就没有必要了。

谢谢。

【问题讨论】：

标签： javascript ajax innerhtml zeroclipboard

【解决方案1】：

您可以将脚本作为 DOM 对象注入页面，但这不适用于所有浏览器：

var s = document.createElement("script");
s.type = "text/javascript";
s.innerText = "var clip" +rnum +"=new ZeroClipboard.Client();clip"+rnum+".setText('');clip"+rnum+".addEventListener('mouseDown',function(client){alert('firing');clip"+rnum+".setText(document.getElementById('SL40').value);});clip"+rnum+".glue('XR"+rnum+"','RH"+rnum+"');";
document.getElementsByTagName("head")[0].appendChild(s);

或者，为了更好的兼容性，您可能只想声明一个在您的页面中设置它的函数，然后使用rnum 作为参数调用该函数。

例如

function useZeroClipboard(rnum) {
    window["clip" + rnum] = new ZeroClipboard.Client();
    cwindow["clip" + rnum].setText('');
    window["clip" + rnum].addEventListener('mouseDown', function(client){
        alert('firing');
        window["clip" + rnum].setText(document.getElementById('SL40').value);
    });
    window["clip" + rnum].glue('XR"+rnum+"','RH"+rnum+"');
}

然后你可以在你的代码中调用它：

useZeroClipboard(rnum);

而不是编写脚本块。

【讨论】：

谢谢你，亚当。我逐渐意识到我问了一个多么错误的问题。我慢慢意识到，从一个已经在运行并且可以做我需要做的事情的脚本中插入一个脚本（使用 innerHTML）是没有意义的。实际上，我的解决方案是按照您的功能想法所建议的去做。我创建了一个全局数组 o，然后使用了 o[rnum] = new ZeroClipboard.Client();等等在我的解决方案中使用 window["clip"+rnum] 会有优势吗？
不，您的新解决方案更好（使用数组比使用编号的全局变量更容易！）

【解决方案2】：

这是一种递归地用可执行脚本替换所有脚本的方法：

function replaceScriptsRecurse(node) {                                                      
        if ( nodeScriptIs(node) ) {                                                         
                var script  = document.createElement("script");                             
                script.text = node.innerHTML;                                               

                node.parentNode.replaceChild(script, node);                                 
        }                                                                                   
        else {                                                                              
                var i        = 0;                                                           
                var children = node.childNodes;                                             
                while ( i < children.length) {                                              
                        replaceScriptsRecurse( children[i] );                               
                        i++;                                                                
                }                                                                           
        }                                                                                   

        return node;                                                                        
}                                                                                           
function nodeScriptIs(node) {                                                               
        return node.getAttribute && node.getAttribute("type") == "text/javascript";         
}

【讨论】：