博客园怎么实现代码运行
博客园怎么实现代码运行?
效果如下:
1、上传脚本文件:点击管理按钮-->>找到下面界面,上传js文件
![](https://images2017.cnblogs.com/blog/1254617/201710/1254617-20171017215536552-548023564.png)
2、引入外部javascript:单击上传成功的文件名,复制url上的地址,就可以直接在html中引用(类似与在线CDN),然后点击设置,找到下面界面引入js:
![](https://images2017.cnblogs.com/blog/1254617/201710/1254617-20171017220020521-1505807639.png)
引入成功后,回微博首页,右击查看源码,可以看到下面(所以在编辑状态下还是无法运行js,保存后可以运行按钮)
3.在编辑窗口找到下面按钮插入代码即可;
参考代码如下:
1 <textarea style="margin: 0px; height: 70px; width: 600px;">试试</textarea> 2 <div> 3 <input class="button1" onclick="runCode(0)" type="button" value="运行代码" /> 4 <input class="button2" onclick="saveCode(0)" type="button" value="保存代码" /> 5 <input class="button3" onclick="copyCode(0)" type="button" value="复制代码" /> 6 </div>
js代码如下:
function runCode(num){ var obj=document.getElementsByTagName("textarea"); for(var i=0;i<obj.length;i++){ if(num==i){ var newWin=window.open('',"_blank",''); newWin.document.open('text/html','replace'); newWin.opener=null var testCode=obj[num].value; newWin.document.write(testCode); newWin.document.close(); } } } /*****保存代码为html页面,现阶段只支持IE******/ //firefox不兼容的主要原因就是因为ff不支持execCommand('saveas','','filename'); function saveCode(num){ var obj=document.getElementsByTagName("textarea"); for(var i=0;i<obj.length;i++){ if(num==i){ var newWin=window.open('','_blank','top=10000'); newWin.document.open('text/html','replace'); var testCode=obj[num].value; newWin.document.write(testCode); newWin.document.execCommand('saveas','','code.htm'); newWin.close(); } } } function copyCode(num){ var obj=document.getElementsByTagName("textarea"); for(var i=0;i<obj.length;i++){ if(num==i){ var testCode=obj[num].value; if(copy2Clipboard(testCode)!=false) { alert("生成的代码已经复制到粘贴板,你可以使用Ctrl+V 贴到需要的地方去了哦! "); } } } } 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); } }
以上是参考后运行成功的例子,欢迎一起交流!!!!
最后还有一个问题:textarea标签直接插入js代码会被注释掉,不知道有什么方法解决,欢迎留言。