innerHTML在正文中插入脚本(用于ZeroClipboard）不起作用

innerHTML to insert script in body (for ZeroClipboard) not working

本文关键字：用于 ZeroClipboard 不起作用 脚本 正文 插入 innerHTML      更新时间：2023-09-26

我正在使用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函数。如果我能让闪光灯工作，那可能就没必要了。

谢谢。

您可以将脚本作为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);

而不是编写脚本块。

这里有一个方法，可以递归地用可执行的脚本替换所有脚本：

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";         
}
相关文章：