Question

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

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

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函数。如果我可以让闪光灯工作，则可能没有必要。

感谢。

Answer 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作为参数调用该函数。

e.g。

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);

而不是编写脚本块。

Answer 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";         
}

innerHTML在body中插入脚本（对于ZeroClipboard）不起作用

2 个答案: