效果:
需要在日歷的旁邊加上今日天氣預報。
實現方法:
HTML頁面使用iframe:
<%-- 天氣預報--%> <iframe allowtransparency="true" id="tianqi" frameborder="0" width="180" height="36" scrolling="no" src=""></iframe>
獲取天氣信息的來源:http://tianqi.2345.com/plugin/widget/index.htm?s=3&z=3&t=1&v=0&d=3&bd=0&k=&f=&q=1&e=1&a=1&c=54511&w=180&h=36&align=left
如果直接給iframe的src屬性,會影響頁面的加載速度,整個頁面的加載會在iframe加載完天氣之后才加載,為了優化速度采用賦值:
<script> //天氣預報 window.onload = function() { setTimeout("loadweather()", 500); } function loadweather(url) { var url = "http://tianqi.2345.com/plugin/widget/index.htm?s=3&z=3&t=1&v=0&d=3&bd=0&k=&f=&q=1&e=1&a=1&c=54511&w=180&h=36&align=left"; $("#tianqi").attr("src", url); } </script>
這樣天氣的加載不會影響頁面的加載速度。
但是還有個問題未解決,如果這個url不能訪問,為了不影響頁面美觀,不出錯,應當先對訪問地址的有效性做判斷,然后再決定是否動態給iframe賦值src,這個暫時還沒有解決。