在网页上运行代码

来源：互联网发布：速溶咖啡知乎编辑：程序博客网时间：2024/05/01 14:09

          昨天我说到了拷贝文本的问题，这个技巧其实在做编辑器这方面有些很普遍的应用，包括今天将要讨论的‘在网页上运行代码’的问题。这里主要有三个问题：

1.文本的拷贝，怎样实现跨浏览器，我们已经实现了

        2.新建一个窗口，怎样向里面写数据（操作窗口的一些问题）

        3.怎样另存为（在firefox在依旧没有解决，请高手不吝赐教！）

<!DOCTYPE html public "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="Keywords" content="简单的XHTML页面" />
    <meta name="Description" content="这是一个简单的XHTML页面" />
    <title>简单的XHTML页面</title>
    <script type="text/javascript" language="javascript" >
/*****运行代码*******************************/
function runCode() {
var newWin = window.open('', "_blank", '');
newWin.document.open('text/html', 'replace');
//newWin.opener = null; 
var testCode=document.getElementById("txtTestCode").value;
newWin.document.write(testCode); //向新打开的窗口中写数据
newWin.document.close();   //不关闭没有本质的影响，但浏览器会一直显示加载的样式 
}
/*****复制代码到粘贴板*********************/
function copyCode(obj){    
    var testCode=document.getElementById("txtTestCode").value;    
    if(copy2Clipboard(testCode)!=false)
    {        
        alert("生成的代码已经复制到粘贴板，你可以使用Ctrl+V 贴到需要的地方去了哦！  ");        
    }    
}
//很大的一陀是为了对firefox的兼容 
copy2Clipboard=function (txt){    
    if(window.clipboardData){        
        window.clipboardData.clearData();        
        window.clipboardData.setData("Text",txt);        
    }else if(navigator.userAgent.indexOf("Opera")!=-1){        
        window.location=txt;                
    }else if(window.netscape){        
        try{            
            netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");            
        }catch(e){            
            alert("您的firefox安全限制限制您进行剪贴板操作，请打开’about:config’将signed.applets.codebase_principal_support’设置为true’之后重试");            
            return false;            
        }
        var clip=Components.classes['@mozilla.org/widget/clipboard;1'].createInstance(Components.interfaces.nsIClipboard);        
        if(!clip)
        return ;        
        var trans=Components.classes['@mozilla.org/widget/transferable;1'].createInstance(Components.interfaces.nsITransferable);        
        if(!trans)
        return ;        
        trans.addDataFlavor('text/unicode');        
        var str=new Object();        
        var len=new Object();        
        var str=Components.classes["@mozilla.org/supports-string;1"].createInstance(Components.interfaces.nsISupportsString);        
        var copytext=txt;        
        str.data=copytext;        
        trans.setTransferData("text/unicode",str,copytext.length*2);        
        var clipid=Components.interfaces.nsIClipboard;        
        if(!clip)
        return false;        
        clip.setData(trans,null,clipid.kGlobalClipboard);        
}
}
/*****保存代码为html页面，非常遗憾的现阶段只支持IE******/
function saveCode(obj) {
var newWin = window.open('', '_blank', 'top=10000');//这里是个技巧，弹出的页面，虽然去不掉，但是我们可以让它向下移动到屏幕之外 
newWin.document.open('text/html', 'replace');
var testCode=document.getElementById("txtTestCode").value;
newWin.document.write(testCode);
newWin.document.execCommand('saveas','','code.htm');//firefox不兼容的主要原因就是因为ff不支持execCommand('saveas','','filename'); 
newWin.close();
}
</script>
</head>
<body>
 <textarea id="txtTestCode" rows="12" cols="75">
 <!doctype html public "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="Keywords" content="YES!B/S!" />
<meta name="Description" content="This page is from http://Justinyoung.cnblogs.com" />
<title>CSS/Javascript demo</title>
</head>
<body>
<p>A testpage from<a href="http://justinyoung.cnblogs.com/" title="博客园Yes！B/S！博客">YES!B/S!</a></p>
</body>
</html>
 </textarea>
 <div style="clear:both;">
<INPUT onclick="runCode()" type=button value=运行代码> 
<INPUT onclick="copyCode()" type=button value=复制代码> <INPUT onclick=saveCode() type=button value=另存代码>
</div>
</body>
</html>