在博客中加入运行代码功能

最新推荐文章于 2021-06-16 14:17:54 发布

weixin_33691817

最新推荐文章于 2021-06-16 14:17:54 发布

阅读量117

点赞数

文章标签： xhtml javascript ViewUI

原文链接：http://www.cnblogs.com/waiting4u/archive/2009/12/15/1624590.html

版权

前言在博客中加入运行代码功能。博客园默认的编辑器只有code功能，没有代码运行功能，不利于一些demo的展示。从网上找到了这个方法，不敢私藏，拿来分享。

【先看个例子】

<!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" /> <title>无标题文档 </title> <style type="text/css">  </style> </head> <body style="width:100%;height:100%">  <div id="pop1" style="z-index:1;background-color:#CCCCCC;filter: alpha(opacity=80);width:100%;height:100%;position:absolute;left:0px;top:0px;display:none"> </div> <div id="pop2" class="pop">你好 </div>  <button οnclick="show('pop1','pop2')">弹出按钮 </button> <script type="text/javascript"> function show(o1,o2){ var o1 = document.getElementById(o1); var o2 = document.getElementById(o2); o1.style.width = document.documentElement.scrollWidth; o1.style.height = document.documentElement.scrollHeight o1.style.display = "block"; o2.style.display = "block"; } </script> <div style="height:999px;width:2999px;"></div> </body> </html>

JS配置在新博客中切换到"HTML",在代码里面插入：

代码

< script language = " JavaScript " type = " text/JavaScript " >
// 运行文本域代码
function runEx(cod1) {
  cod = document.all(cod1)
   var code = cod.value;
   if (code != "" ){
     var newwin = window.open( '' , '' , '' ); // 打开一个窗口并赋给变量newwin。
    newwin.opener = null // 防止代码对论谈页面修改
    newwin.document.write(code); // 向这个打开的窗口中写入代码code，这样就实现了运行代码功能。
    newwin.document.close();
  }
}
< / script>

前台调用在新博客中切换到"HTML",在代码里面插入：

< textarea id ="rn01" name ="textarea" rows ="10" cols ="60" ></ textarea > < br />
< input style ="cursor: hand" onclick ="runEx('rn01')" type ="button" value ="运行代码" >

本来想在配置里面的"页首HTML"里面加那段JS的，这样就不用每次发文文章都引用了，但是系统会把 window.open( '' , '' , '' ); 这句自动删除应该是为了防止恶意脚本吧，所以现在就在每篇文章里面加一段了，将就用用了，如果大家有什么更好的方法，欢迎留言。

转载于:https://www.cnblogs.com/waiting4u/archive/2009/12/15/1624590.html

weixin_33691817

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
在博客中加入运行代码功能

前言在博客中加入运行代码功能。博客园默认的编辑器只有code功能，没有代码运行功能，不利于一些demo的展示。从网上找到了这个方法，不敢私藏，拿来分享。【先看个例子】<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-t...
复制链接

扫一扫