博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
教你如何在博客园放“可运行"代码
阅读量:6372 次
发布时间:2019-06-23

本文共 2116 字,大约阅读时间需要 7 分钟。

hot3.png

104027_xi1c_572288.png

      自从看到别人的博客可以放上面那种可运行的代码后,我一直在研究这种效果是怎么弄出来的,我知道蓝色理想上面可以在编辑器里直接将代码放进一个可运行的代码框,发布后就是可运行的了。但博客园的默认的三个编辑器里,死活找不到那可运行的按钮。直到昨天,在群里某高手提示说可以自己写一个,然后他给我说了思路,并提供了一个demo,就是在页面嵌入一个textarea,然后单击运行代码时,将textarea里的所有内容在新open的页面里执行,就行了。我在本地测试,实践结果是可行的,但一放上博客园这里,<script>总给过滤掉了,实在是郁闷得很。无奈,昨天又以失败告终。

      今天,就在刚刚,我又在某群发问了,另一高手回答了我的问题,我才知道,怎样才能让script不被过滤。下面,是步骤:

      .首先,准备一个textarea,这个文本框里放上我们所要执行的代码,可以是任意代码,比如一个标准的html页,也可以像我下面一样,直接放上一段js代码,如下:

      alert("你知道我是怎么弹出的吗?");

要运行的代码准备好了,但我们并不能直接将他放在页面,请看下一步骤:

      .单击如图所示红圈中的HTML按钮:,在弹出的对话框里将第一步骤里准备的代码放到所要放的位置上。(注:如果放上去后更新后,发现文本框里的<script>并不能正常显示,如多了个&mce:码或者其他什么的,请重新单击HTML,将多余转码删除。)

      基本条件已具备,现在就需要一个JS来获取这个文本框里的内容,并open一个新页,将这些内容放在新页里执行了。这,是关键内容。请看第步:

      .准备一个js文件,js文件里放上以下代码:

window.onload = function(){    var btn = document.getElementById("btn");    var con = document.getElementById("con");    btn.onclick = function(){        var sun = window.open("");        sun.document.write(con.value);    }}

这代码是跟上面的textarea对应的,如果修改了textarea或button的id,则这里也要修改,并不是通用的呵呵,只是我写的粗糙的测试代码。

代码准备好后,保存为一个js文件,我这里保存为littledu.js。接着,我们要将这文件上传到博客园上,将在页面引用它。请看第步:

      .单击博客首页的“管理”,进入管理页面,在管理页面里单击“文件”选项卡,进入,并上传littledu.js文件,上传完毕后单击该文件,复制地址栏的地址,此为该js文件的地址。如,我的littledu.js文件地址为:http://files.cnblogs.com/littledu/littledu.js。  接着,最关键的一步来了,请看第步:

.按照第步的步骤,进入管理页面,但这次,我们要进入“设置”选项卡,在设置选项卡下的“页首html代码”框里,放上我们的js文件地址,如图:

104107_CVTS_572288.jpg

到这里,就已经完成了。发布后,单击运行代码,效果出来啦!!!

整个世界是如此的美好,阿门。

/*****************************华丽的分隔线********--日修改****************************/

粗糙的代码就是不行,今天放代码时遇到这样一个问题,在ff和ie里,运行的页面需要刷新一次才能正常运行,而chrome里干脆只执行了html和css,对js是完全忽略掉了。很是奇怪,但别人的不管在什么浏览器都正确运行啊,没理由是我的浏览器问题。

最后,想到会不会是我的littledu.js里的代码不够好,为了测试是不是这样的,我专门去firebug了某高手的博客,提取到了他的open代码,替换掉我上面的粗糙代码,还真的是,所以浏览器都正常了,唉!!!!!!!!!

下面是新的littledu.js代码

window.onload = function(){    var btn = document.getElementById("btn");    var con = document.getElementById("con");    btn.onclick = function(){        var newwin = window.open('', "_blank", '');        newwin.document.open('text/html', 'replace');        newwin.opener = null;        newwin.document.write(con.value);        newwin.document.close();    }}

转载于:https://my.oschina.net/yonghan/blog/471061

你可能感兴趣的文章
CDN(内容分发网络)技术原理
查看>>
观察一个人的能力
查看>>
UDP卷1:第六章(I/O复用:select和poll函数)
查看>>
主流需求管理工具对比
查看>>
几个Xaml开发Visual Studio 2010设置技巧
查看>>
我的友情链接
查看>>
nginx日志的错误级别
查看>>
第19集 介系词
查看>>
远程桌面服务
查看>>
Oracle数据导入导出
查看>>
使用Varnish实现web前置缓存加速
查看>>
用dos命令启动服务程序或关闭服务程序
查看>>
android中的dp概念以及关系换算
查看>>
Fail Open Hav
查看>>
全能管理系统开发进度报告01
查看>>
C++ 关于用指针修改const的值
查看>>
extjs4 省市区选择器
查看>>
5个示例带你学习AngularJS
查看>>
jquery 控制li点击换样式
查看>>
CentOS5.11配置Let's Encrypt免费证书
查看>>