关于博客园的在线演示

  在博客园发表文章,有时候就需要在线演示,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代码代替,"<"写成"&gt", ">"写成"&lt",注意是代码里的标签,而不是最外层的</textarea>标签

posted @ 2013-10-11 10:47  前端小茶馆  阅读(344)  评论(0编辑  收藏  举报