原文發在新浪博客：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>