给博客添加Flash时钟

依稀记得在cnblogs很多大牛的博客里见到过大牛的新闻公告栏里那种动感十足的Flash时钟控件,先上图:

 

作为一名刚的接触博客菜鸟,自然免不了一番好奇。博客设置选项里翻来覆去找(以为是cnblogs自带的功能...),主题样式换了好几个,就是找不到带Flash样式的。不过倒是在设置里找到个“博客侧边栏公告”的东东,如图所示。

想起刚上大学那会大家在网上搜免费的QQ空间主题js代码的经历,感觉突破口就是它了。稍稍问了一下度姑娘,还真找到了解决方案,总结如下:

1、添加object标签

既然说支持HTML代码,那灵活度就大了,找到这个酷炫的Flash时钟swf资源的URI,设定一下object的标签属性即可,上代码:

1 <object width="200" height="75" data="https://files.cnblogs.com/arthurymn/honehone_clock_wh.swf" type="application/x-shockwave-flash">
2   <param name="src" value="https://files.cnblogs.com/arthurymn/honehone_clock_wh.swf" />
3 </object>

 

只需要将data属性的值修改成你喜欢的Flash的URI即可,当然,width和height也需要根据页面的情况调整一下。这里有个比较人性化的地方,在博客的“管理-文件”页面,可以上传自己本地的Flash,然后这个swf文件将成为你的资源外链,再也不用担心自己挂的网络URI无效了之后出现个空白框框了。

(这种方案似乎不能兼容所有浏览器,自己测试360极速和兼容模式,以及IE11下可以正常显示)

2、embed标签

<embed src="https://files.cnblogs.com/arthurymn/honehone_clock_wh.swf" />

 <embed> 标签是 HTML 5 中的新标签,当然也就只能在支持HTML5的浏览器下正常显示了。一般使用如下写法:

(参考:http://www.cnblogs.com/wenyang-rio/archive/2013/01/05/2845973.html)

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="160" height="70" id="honehoneclock" align="middle"><param name="allowScriptAccess" value="always"><param name="movie" value="http://chabudai.sakura.ne.jp/blogparts/honehoneclock/honehone_clock_wh.swf"><param name="quality" value="high"><param name="bgcolor" value="#ffffff"><param name="wmode" value="transparent"><embed wmode="transparent" src="http://chabudai.sakura.ne.jp/blogparts/honehoneclock/honehone_clock_wh.swf" quality="high" bgcolor="#ffffff" width="160" height="70" name="honehoneclock" align="middle" allowscriptaccess="always" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"></object>

这个方案里头object中嵌套着一个embed标签,确实提高了代码对各类浏览器的兼容性,自己保存成.html文件在自己本本的所有浏览器上试了一下,都可以正常显示,可谓是绝佳方案,绝非吾等菜鸟写出来的网页代码。然而一个奇怪的事情发生了,修改完毕之后点击保存,进入“我的博客”看效果,竟然没出来!!!再回去设置里,发现<embed/>里的代码消失了,又多试了几次,效果一样,看来cnblogs不大待见embed啊,提交不上去啊,bug了有木有......于是乎第3种方案!

3、js动态写入HTML代码

<script type="text/javascript">
var swfTitle = "honehoneclock";
var sUrl = "https://files.cnblogs.com/arthurymn/honehone_clock_wh.swf";
var sHtml = "";
sHtml += '<object width="200" height="75" data="https://files.cnblogs.com/arthurymn/honehone_clock_wh.swf" type="application/x-shockwave-flash">';
sHtml += '<param name="src" value="https://files.cnblogs.com/arthurymn/honehone_clock_wh.swf" />';
sHtml += '<embed wmode="transparent" src="' + sUrl + '" quality="high" bgcolor="#ffffff" width="160" height="70" name="' + swfTitle + '" align="middle" allowScriptAccess="always" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />';
sHtml += '</object>';
document.write(sHtml);
</script>

这样,不论是object标签还是embed标签,document.write之前都是当做字符串处理的,点击设置里的“保存”按钮,再返回“我的博客”,顺利成功显示!

(注:在让js生效之前,需要向“博客园团队”发送消息,申请js权限才能使用,本人昨晚抱着试试的态度,发了条信息,说想申请js,今天果断通过申请了,cnblogs一如既往的高效啊,向高效率精神致敬!)

 纯业余整理,若有解释不当之处,欢迎指正:)

posted @ 2014-06-29 00:53  ArthurYMN  阅读(635)  评论(2编辑  收藏  举报