依稀记得在cnblogs很多大牛的博客里见到过大牛的新闻公告栏里那种动感十足的Flash时钟控件,先上图:
作为一名刚的接触博客菜鸟,自然免不了一番好奇。博客设置选项里翻来覆去找(以为是cnblogs自带的功能...),主题样式换了好几个,就是找不到带Flash样式的。不过倒是在设置里找到个“博客侧边栏公告”的东东,如图所示。
aaarticlea/png;base64,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RIICABAJCgBAtDkoPH/+fHcGALzqfKIAAESCAgAQCQoAQCQoAACRoAAARIICABAJCgBAJCgAAJGgAABEggIAEAkKAEAkKAAAkaAAAESCAgAQCQoAQCQoAACRoAAARIICABAJCgBAJCgAAJGgAABEggIAEAkKAEAkKAAAkaAAAESCAgAQCQoAQCQoAACRoAAARIICABAJCgBAJCgAAJGgAABEggIAEAkKAEAkKAAAkaAAAESCAgAQCQoAQCQoAACRoAAARIICABAJCgBAJCgAAJGgAABEggIAEAkKAEAkKAAAkaAAAESCAgAQCQoAQCQoAACRoAAARIICABAJCgBAJCgAAJGgAABEggIAEAkKAEAkKAAAkaAAAESCAgAQCQoAQCQoAACRoAAARIICABAJCgBAJCgAAJGgAABEggIAEAkKAEAkKAAAkaAAAESCAgAQCQoAQCQoAACRoAAARIICABAJCgBAJCgAAJGgAABEggIAEAkKAEAkKAAAkaAAAESCAgAQCQoAQCQoAACRoAAARIICABAJCgBAJCgAAJGgAABEggIAEAkKAEAkKAAAkaAAAESCAgAQCQoAQCQoAACRoAAARIICABAJCgBAJCgAAJGgAABEggIAEAkKAEAkKAAAkaAAAESCAgAQCQoAQCQoAACRoAAARIICABAJCgBAJCgAAJGgAABEggIAEAkKAEAkKAAAkaAAAESCAgAQCQoAQCQoAACRoAAARIICABAJCgBAJCgAAJGgAABEggIAEAkKAEAkKAAAkaAAAESCAgAQCQoAQCQoAACRoAAARIICABAJCgBAJCgAAJGgAABEggIAEAkKAEAkKAAAkaAAAESCAgAQCQoAQCQoAACRoAAARIICABAJCgBAJCgAAJGgAABEggIAEAkKAEAkKAAAkaAAAESCAgAQCQoAQCQoAACRoAAARIICABAJCgBAJCgAAJGgAABEggIAEAkKAEAwTf8D2Splhg4VB1YAAAAASUVORK5CYII=" alt="" />
想起刚上大学那会大家在网上搜免费的QQ空间主题js代码的经历,感觉突破口就是它了。稍稍问了一下度姑娘,还真找到了解决方案,总结如下:
1、添加object标签
既然说支持HTML代码,那灵活度就大了,找到这个酷炫的Flash时钟swf资源的URI,设定一下object的标签属性即可,上代码:
<object width="200" height="75" data="http://files.cnblogs.com/arthurymn/honehone_clock_wh.swf" type="application/x-shockwave-flash">
<param name="src" value="http://files.cnblogs.com/arthurymn/honehone_clock_wh.swf" />
</object>
只需要将data属性的值修改成你喜欢的Flash的URI即可,当然,width和height也需要根据页面的情况调整一下。这里有个比较人性化的地方,在博客的“管理-文件”页面,可以上传自己本地的Flash,然后这个swf文件将成为你的资源外链,再也不用担心自己挂的网络URI无效了之后出现个空白框框了。
(这种方案似乎不能兼容所有浏览器,自己测试360极速和兼容模式,以及IE11下可以正常显示)
2、embed标签
<embed src="http://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 = "http://files.cnblogs.com/arthurymn/honehone_clock_wh.swf";
var sHtml = "";
sHtml += '<object width="200" height="75" data="http://files.cnblogs.com/arthurymn/honehone_clock_wh.swf" type="application/x-shockwave-flash">';
sHtml += '<param name="src" value="http://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一如既往的高效啊,向高效率精神致敬!)
纯业余整理,若有解释不当之处,欢迎指正:)