关于博客园的在线演示
在博客园发表文章,有时候就需要在线演示,demo演示,可是博客园又不能托管html文件。
很多人也想了不少的方法,下面是我的实现方法。
我也有看过其他博友的文章,是将代码写在textarea里,然后用js来实现。只是在预览后我们会发现,博客园将style标签里的内容屏蔽了,或者说,style标签里的样式,用在了整篇文章的版面。
看看我刚做的demo:http://www.cnblogs.com/xumengxuan/p/3362886.html
我在用谷歌进行搜索的时候,发现有一位博友的文章:除了代码演示,其他任何的标签都没有,但是右键查看源代码的话,发现博客园所有默认的html标签都还在,也就是说,该博友将标签隐藏了,专门用这篇文章来做demo。于是,我也就沿着这个思路进行设计。
当然,在进行之前,我们需要解决一个问题,就是博客园会错误地引用textarea中的style标签,这里我的解决方案是:更改博客园的默认编辑器为文本编辑器,我们不让博客园提供任何的html代码,我们自己来编辑我们需要的html代码。
然后把不必要的标签隐藏,将代码放到textarea中,
<style type="text/css">
*{display:none;}
</style>
<textarea id="cnblogsShowCode">
<!-- 放置你的html代码 -->
</textarea>
再添加一段js代码来获取textarea中的内容,并在本页面中打开,js代码如下:
<script type="text/javascript"> $(function(){ var winname = window.open('', "_self", ''); var content = document.getElementById("cnblogsShowCode").value; winname.document.open('text/html', 'replace'); winname.opener = null winname.document.writeln(content); winname.document.close(); }) </script>
当然,使用这种方法,也是可以不用隐藏不必要的标签。只是我发现,如果不隐藏的话,打开这个页面时,会首先显示出原来的内容,然后才显示你要演示的代码。给人一种被替换的感觉。所以,还是将博客园默认的html标签隐藏了比较好。
这里还存在着一个问题:如果要执行的代码里也存在textarea标签,那么就会出现不必要的麻烦。<textarea id="cnblogsShowCode">会与第一次出现的</textarea>进行匹配,后面的代码都会忽略掉。这里的解决方案是:把代码里的</textarea>两边的尖括号改成用html代码代替,"<"写成">", ">"写成"<",注意是代码里的标签,而不是最外层的</textarea>标签。