原文发在新浪博客：http://blog.sina.com.cn/s/blog_538cd20d0100k1ky.html
新浪博客现在有个组件，叫“我去过的地方”，然而，这个模块只能根据博文设定，所以实用性、娱乐性被大大限制。之前在携程设定做“我的足迹”，里面包括去过的、想去的地方，觉得挺好。最近再次登录携程，发现携程提供了博客代码，如图1所示，于是便想要将其增加到博客首页。
图1 携程上的足迹代码获取
点击“获取代码”，获取如下代码：
<script charset="gb2312" type="text/javascript" src="http://members.ctrip.com/ctripmember/widget.aspx?profileUrlNo=11D4CC7F0E0444CA91B85E65045F4C72"></script>
这是一段javascript代码，可惜的是，可能是出于安全考虑，新浪博客的自定义组件支持HTML代码，但并不支持javascript。如我博客首页的“四海宾客之地图”、“四海宾客之数字”，就都是一个图片的超链接，但携程的这段代码则不被新浪的自定义组件所接受。
我把上面这段代码中src属性所指明的URL直接粘贴到浏览器中显示，其结果如图2所示：
图2 javascript代码的结果
这说明返回的javascript，就是用document.write向页面写入了图片和一些文字链接。查看网页源代码，果然不出我所料。代码如下：
document.write("<div style='margin:0;padding:0;width:378px;overflow:hidden;position:relative;font-size:12px;'><div style='margin:0;padding:0;height:220px;border:solid Black 1px;'><em style='display:block;position:absolute;width:376px;text-align:center;line-height:24px;color:White;opacity:0.8;filter:alpha(opacity=80);background:#6b8baa;font-style:normal;'>我的足迹</em><div style='margin:0;padding:0;'><img src='/ctripmember/travelmapimage/default.aspx?screenname=11D4CC7F0E0444CA91B85E65045F4C72' alt='' /></div></div><ul style='margin:0;padding:10px 0 0 15px;line-height:22px;'><li style='margin:0;padding:0;list-style:disc outside;'>访问我的<a href='http://members.ctrip.com/11D4CC7F0E0444CA91B85E65045F4C72' style='color:#07328e;text-decoration:underline;'>携程个人主页</a></li><li style='margin:0;padding:0;list-style:disc outside;'>创建你自己的<a href='http://members.ctrip.com/' style='color:#07328e;text-decoration:underline;'>足迹秀</a></li></ul></div>");
那么，只要把document.write函数中的HTML部分仔细分析，并提取出图片的部分即可。去掉文字、链接，保留最外层div后，代码如下：
<div style='margin:0;padding:0;width:378px;overflow:hidden;position:relative;font-size:12px;'><img src='/ctripmember/travelmapimage/default.aspx?screenname=11D4CC7F0E0444CA91B85E65045F4C72' alt='' /></div>
这实际上就是两个嵌套的div中包含一个img了。不过还没完，这里还需要继续改进。
第一，img的src属性用的是相对URL，这会导致获取图片时从
http://blog.sina.com.cn/sizheng获取，结果肯定会失败，用
http://members.ctrip.com补充成绝对URL后，在浏览器中试验成功。
第二，div的尺寸太大，会超出新浪博客组件的宽度，从而“浮”在页面的表面。将div中的各种大小、边界、空白属性一律去掉，将其overflow:hidden属性改为overflow:auto，就会自动出现滚动条，从而不会让整个图片超出范围了。
第三，上面的代码只是显示一个图片，然而参考之前的“四海宾客之地图”、“四海宾客之数字”两个组件，应该为图片加上超链接，链接到相应网站，从而为感兴趣的用户提供方便的访问，所以为img加上了超链接。一开始忘了给超链接设定target="_blank"属性，导致一点击就在当前页面跳转了。
至此，大功告成~
最终代码：
<DIV style="OVERFLOW: auto; POSITION: relative"><A href="
http://members.ctrip.com/travelmap-public-11D4CC7F0E0444CA91B85E65045F4C72" target=_blank><IMG alt="" src="
http://members.ctrip.com/ctripmember/travelmapimage/default.aspx?screenname=11D4CC7F0E0444CA91B85E65045F4C72"></A></DIV>
