利用 JavaScript + CSS 作 frame 的效果

丟掉或是 </code> 吧！<br /> <span id="more-505"></span><a href='http://blog.ericsk.org/wp-content/uploads/2007/03/layout.png' title='網頁 layout' rel="lightbox"><img src='http://blog.ericsk.org/wp-content/uploads/2007/03/layout.png' class="alignright" alt='網頁 layout' /></a>有個朋友他的網頁左邊是選單，右側是選單點選後所顯示的網頁內容，有點像右圖這樣子。過去可能很多人都會用 <code><frameset></code> 來做這樣的事，左右各是一個 frame，然後把選單的 link target 設成右邊的 frame；或者是右邊弄成一個 <code><iframe></code>，利用它來換不同連結的內容。但這位朋友最近不想用 frame 來做這些事，想看看能不能利用 JavaScript 和 <abbr title="Cascading Style Sheets">CSS</abbr> 來作到原本 frame 的效果，所以我就幫他一點小忙順便筆記下來，若以後有需要就可以用得上。<br /> 我的想法是，利用兩個 <code>div</code> 來放選單及內容，所以 HTML code 可能會寫成這樣：<br /> [code lang=”xml”]</p> <div id="menu"> … </div> <div id="content"></div> <p>[/code]<br /> 然後當點選選單內容連結時，使用 Ajax 來 get 目的網頁，並且把取得的網頁內容放在 content 這個 div 之中。<br /> 首先，要先把 content 這個 div 的 <code>overflow</code> 屬性改一下，在 stylesheet 中加入：<br /> [code lang=”css”]<br /> #content {<br /> overflow: auto;<br /> }<br /> [/code]<br /> 這樣當目的網頁內容超過 content 這個 div 邊界時才會出現 scroll bar。<br /> 接著，就是選單的內容：<br /> [code lang=”xml”]</p> <div id="menu"> <ul> <li><a href="#" onclick="linkto('a.html');">Link To A</a></li> <li><a href="#" onclick="linkto('b.html');">Link To B</a></li> <li><a href="#" onclick="linkto('c.html');">Link To C</a></li> </ul> </div> <p>[/code]<br /> 我在 <code>a</code> tag 中不設定連結的目的，反而是用一個 JavaScript function 來處理連結的目的地。所以要在 <code><head> ... </head></code> 間寫一點 JavaScript，而我這裡使用了 <a href="http://www.prototypejs.org/" target="_blank" rel="noopener noreferrer">Prototype.js</a> 這個 JavaScript library 來使用 Ajax：<br /> [code lang=”javascript”]<br /> <br /> <script type="text/javascript" src="prototype.js"></script><br /> <script type="text/javascript"> function linkto(url) { new Ajax.Updater('content', url, {method: 'get'}); } </script><br /> [/code]<br /> 這樣一來，在 menu 裡使用 <code>linkto</code> function 來作連結的網頁就會秀在 content 這個 div 裡了。<br /> 不過，用這個方法連結的網頁必須要放在同一個網域下（因為 XMLHttpRequest 的限制），要連結到外部網頁可能還是得靠 <code>iframe</code> 幫忙了。</p> </div> <footer class="entry-footer default-max-width"> <div class="posted-by"><span class="posted-on">Published <time class="entry-date published updated" datetime="2007-03-02T14:42:34+00:00">March 2, 2007</time></span><span class="byline">By <a href="https://blog.ericsk.org/author/ericsk/" rel="author">ericsk</a></span></div><div class="post-taxonomies"><span class="cat-links">Categorized as <a href="https://blog.ericsk.org/category/programming/" rel="category tag">程式設計</a>, <a href="https://blog.ericsk.org/category/computer-science/" rel="category tag">資訊科學</a> </span><span class="tags-links">Tagged <a href="https://blog.ericsk.org/tag/css/" rel="tag">css</a></span></div> </footer> </article> <div id="comments" class="comments-area default-max-width show-avatars"> <h2 class="comments-title"> 13 comments </h2> <ol class="comment-list"> <li id="comment-633" class="comment even thread-even depth-1"> <article id="div-comment-633" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <img alt='' src='https://secure.gravatar.com/avatar/3138cfae586a01936fb44eaa0e19389c?s=60&d=mm&r=g' srcset='https://secure.gravatar.com/avatar/3138cfae586a01936fb44eaa0e19389c?s=120&d=mm&r=g 2x' class='avatar avatar-60 photo' height='60' width='60' loading='lazy'/> <b class="fn">San-Yuan Chen</b> <span class="says">says:</span> </div> <div class="comment-metadata"> <a href="https://blog.ericsk.org/2007/03/02/%e5%88%a9%e7%94%a8-javascript-css-%e4%bd%9c-frame-%e7%9a%84%e6%95%88%e6%9e%9c/#comment-633"><time datetime="2007-04-18T08:28:32+00:00">April 18, 2007 at 8:28 am</time></a> </div> </footer> <div class="comment-content"> <p>Hello,<br /> 我是從廖大那邊看到你的 blog ，這篇借我引用一下吧～～～</p> </div> </article> </li> <li id="comment-634" class="comment byuser comment-author-ericsk bypostauthor odd alt thread-odd thread-alt depth-1"> <article id="div-comment-634" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <img alt='' src='https://secure.gravatar.com/avatar/9f61b4aea8f233dd0b3a41f9a0ce407e?s=60&d=mm&r=g' srcset='https://secure.gravatar.com/avatar/9f61b4aea8f233dd0b3a41f9a0ce407e?s=120&d=mm&r=g 2x' class='avatar avatar-60 photo' height='60' width='60' loading='lazy'/> <b class="fn"><a href='http://blog.ericsk.org/' rel='external nofollow ugc' class='url'>ericsk</a></b> <span class="says">says:</span> </div> <div class="comment-metadata"> <a href="https://blog.ericsk.org/2007/03/02/%e5%88%a9%e7%94%a8-javascript-css-%e4%bd%9c-frame-%e7%9a%84%e6%95%88%e6%9e%9c/#comment-634"><time datetime="2007-04-18T09:01:41+00:00">April 18, 2007 at 9:01 am</time></a> </div> </footer> <div class="comment-content"> <p>謝謝你的賞識，請自取吧～（不要把作者拿掉就好 lol）</p> </div> </article> </li> <li id="comment-635" class="comment even thread-even depth-1"> <article id="div-comment-635" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <img alt='' src='https://secure.gravatar.com/avatar/e5e2bd49d58cbceb1248696d4d4ef88e?s=60&d=mm&r=g' srcset='https://secure.gravatar.com/avatar/e5e2bd49d58cbceb1248696d4d4ef88e?s=120&d=mm&r=g 2x' class='avatar avatar-60 photo' height='60' width='60' loading='lazy'/> <b class="fn">鴻哥</b> <span class="says">says:</span> </div> <div class="comment-metadata"> <a href="https://blog.ericsk.org/2007/03/02/%e5%88%a9%e7%94%a8-javascript-css-%e4%bd%9c-frame-%e7%9a%84%e6%95%88%e6%9e%9c/#comment-635"><time datetime="2007-07-26T17:20:48+00:00">July 26, 2007 at 5:20 pm</time></a> </div> </footer> <div class="comment-content"> <p>作者您好:<br /> 我想請問一下,連結的網頁a.html,b.html….的網頁<br /> 是不是不能用中文網頁呢.我用中文網頁有問題<br /> 但是英文網頁可以.</p> </div> </article> </li> <li id="comment-636" class="comment odd alt thread-odd thread-alt depth-1"> <article id="div-comment-636" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <img alt='' src='https://secure.gravatar.com/avatar/30050949ccc65652c819c534bcfc0b61?s=60&d=mm&r=g' srcset='https://secure.gravatar.com/avatar/30050949ccc65652c819c534bcfc0b61?s=120&d=mm&r=g 2x' class='avatar avatar-60 photo' height='60' width='60' loading='lazy'/> <b class="fn">小學生級</b> <span class="says">says:</span> </div> <div class="comment-metadata"> <a href="https://blog.ericsk.org/2007/03/02/%e5%88%a9%e7%94%a8-javascript-css-%e4%bd%9c-frame-%e7%9a%84%e6%95%88%e6%9e%9c/#comment-636"><time datetime="2008-03-07T15:27:23+00:00">March 7, 2008 at 3:27 pm</time></a> </div> </footer> <div class="comment-content"> <p>[quote comment=””]作者您好:<br /> 我想請問一下,連結的網頁a.html,b.html….的網頁<br /> 是不是不能用中文網頁呢.我用中文網頁有問題<br /> 但是英文網頁可以.[/quote]<br /> 我跟樓上的有同樣情況! 分頁的中文會顯示亂碼!<br /> 再請問作者，為何分頁a.html,b.html,chtml…裡面的javascript 及 flash 都不能顯示或正常運作! 請問有解決方法嗎? 這樣情況比iframe 就不好用了!</p> </div> </article> </li> <li id="comment-637" class="comment even thread-even depth-1"> <article id="div-comment-637" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <img alt='' src='https://secure.gravatar.com/avatar/89d2b7e0670f4c04b206a46c37fb254b?s=60&d=mm&r=g' srcset='https://secure.gravatar.com/avatar/89d2b7e0670f4c04b206a46c37fb254b?s=120&d=mm&r=g 2x' class='avatar avatar-60 photo' height='60' width='60' loading='lazy'/> <b class="fn"><a href='http://blog.pixnet.net/yangshenghan' rel='external nofollow ugc' class='url'>聖翰</a></b> <span class="says">says:</span> </div> <div class="comment-metadata"> <a href="https://blog.ericsk.org/2007/03/02/%e5%88%a9%e7%94%a8-javascript-css-%e4%bd%9c-frame-%e7%9a%84%e6%95%88%e6%9e%9c/#comment-637"><time datetime="2008-03-15T11:58:13+00:00">March 15, 2008 at 11:58 am</time></a> </div> </footer> <div class="comment-content"> <p>[quote comment=”18014″][quote comment=””]作者您好:<br /> 我想請問一下,連結的網頁a.html,b.html….的網頁<br /> 是不是不能用中文網頁呢.我用中文網頁有問題<br /> 但是英文網頁可以.[/quote]<br /> 我跟樓上的有同樣情況! 分頁的中文會顯示亂碼!<br /> 再請問作者，為何分頁a.html,b.html,chtml…裡面的javascript 及 flash 都不能顯示或正常運作! 請問有解決方法嗎? 這樣情況比iframe 就不好用了![/quote]<br /> 把JS拉到主要頁面<br /> 然後Ajax處理完之後立刻呼叫該JS檔案的啟動函數</p> </div> </article> </li> <li id="comment-638" class="comment odd alt thread-odd thread-alt depth-1"> <article id="div-comment-638" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <img alt='' src='https://secure.gravatar.com/avatar/97949d3959b32a13401deb838f6575c8?s=60&d=mm&r=g' srcset='https://secure.gravatar.com/avatar/97949d3959b32a13401deb838f6575c8?s=120&d=mm&r=g 2x' class='avatar avatar-60 photo' height='60' width='60' loading='lazy'/> <b class="fn">7-11</b> <span class="says">says:</span> </div> <div class="comment-metadata"> <a href="https://blog.ericsk.org/2007/03/02/%e5%88%a9%e7%94%a8-javascript-css-%e4%bd%9c-frame-%e7%9a%84%e6%95%88%e6%9e%9c/#comment-638"><time datetime="2008-05-01T16:32:27+00:00">May 1, 2008 at 4:32 pm</time></a> </div> </footer> <div class="comment-content"> <p>回覆javascript 不能執行的問題，<br /> 可以改成<br /> function linkto(url) {<br /> new Ajax.Updater(‘content’, url, {method: ‘get’,evalScripts: true});<br /> }<br /> 就可以了，但是FLASH不曉得怎麼解決。<br /> 中文亂碼的部分，主頁與分頁的編碼方式相同應該就沒問題了。</p> </div> </article> </li> <li id="comment-639" class="comment even thread-even depth-1"> <article id="div-comment-639" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <img alt='' src='https://secure.gravatar.com/avatar/ab3ca90a9fe0b2e88221380505e931ab?s=60&d=mm&r=g' srcset='https://secure.gravatar.com/avatar/ab3ca90a9fe0b2e88221380505e931ab?s=120&d=mm&r=g 2x' class='avatar avatar-60 photo' height='60' width='60' loading='lazy'/> <b class="fn">carl</b> <span class="says">says:</span> </div> <div class="comment-metadata"> <a href="https://blog.ericsk.org/2007/03/02/%e5%88%a9%e7%94%a8-javascript-css-%e4%bd%9c-frame-%e7%9a%84%e6%95%88%e6%9e%9c/#comment-639"><time datetime="2008-07-13T14:28:29+00:00">July 13, 2008 at 2:28 pm</time></a> </div> </footer> <div class="comment-content"> <p>一開始html文件的編碼最好就用utf-8 其他的用這方法應該都會有亂碼<br /> 文件本身的編碼是在開檔一開始就已經設定了<br /> 這跟用meta這個不一樣 meta只是告訴瀏覽器判斷該用啥編碼<br /> 可是如果文件本身不是這種編碼那還是不行<br /> 例如html本身是用ansi 即使你在meta裡面設定是utf-8 那還是會一樣是亂碼<br /> 比較好的方法就是先把meta裡面的先改成utf-8<br /> 然後利用記事本開html 另存新檔的視窗裡有一個編碼改成utf-8再存檔就ok了</p> </div> </article> </li> <li id="comment-640" class="comment odd alt thread-odd thread-alt depth-1"> <article id="div-comment-640" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <img alt='' src='https://secure.gravatar.com/avatar/bc8f25023d8fd01c0a36d3e9b929b64e?s=60&d=mm&r=g' srcset='https://secure.gravatar.com/avatar/bc8f25023d8fd01c0a36d3e9b929b64e?s=120&d=mm&r=g 2x' class='avatar avatar-60 photo' height='60' width='60' loading='lazy'/> <b class="fn">Taro</b> <span class="says">says:</span> </div> <div class="comment-metadata"> <a href="https://blog.ericsk.org/2007/03/02/%e5%88%a9%e7%94%a8-javascript-css-%e4%bd%9c-frame-%e7%9a%84%e6%95%88%e6%9e%9c/#comment-640"><time datetime="2009-04-14T14:18:32+00:00">April 14, 2009 at 2:18 pm</time></a> </div> </footer> <div class="comment-content"> <p>你好~我不懂javascript只會html跟css,日前做網頁需要搜尋到您的此篇文章,幫助我實現javascript+CSS做frame的效果,真是感謝~<br /> 但我又遇到一個問題:選單中的其中一個連結我還要加入”彈出式選單”,然後點選後再替換content內容.請問該如何實現呢?</p> </div> </article> </li> <li id="comment-641" class="comment even thread-even depth-1"> <article id="div-comment-641" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <img alt='' src='https://secure.gravatar.com/avatar/164bb4a754e599f7f0eb8d09b5bccd1c?s=60&d=mm&r=g' srcset='https://secure.gravatar.com/avatar/164bb4a754e599f7f0eb8d09b5bccd1c?s=120&d=mm&r=g 2x' class='avatar avatar-60 photo' height='60' width='60' loading='lazy'/> <b class="fn">grissonlin</b> <span class="says">says:</span> </div> <div class="comment-metadata"> <a href="https://blog.ericsk.org/2007/03/02/%e5%88%a9%e7%94%a8-javascript-css-%e4%bd%9c-frame-%e7%9a%84%e6%95%88%e6%9e%9c/#comment-641"><time datetime="2009-07-27T12:34:27+00:00">July 27, 2009 at 12:34 pm</time></a> </div> </footer> <div class="comment-content"> <p>我參考你的範例之後，有成功的做出來。<br /> 但遇到些問題，由於被導入iframe的網頁，在不同的子資料夾內，而這些頁面，都需要抓取另外一個共用的images資料夾裏頭的圖片，<br /> 由於我們網站有搜尋引擎，所以這些被導入iframe的網頁，都會被以開新視窗的方式顯示，<br /> 問題就出現了，從iframe導入的頁面的圖片都顯示正常，但是獨立顯示頁面的時候就會出問題。<br /> 換另外一種方式說<br /> 就是這些頁面獨立顯示的時候圖片路徑必須抓 src=’../../images/a.jpg<br /> 被導入iframe的時候圖片路徑必須抓 src=’../images/a.jpg<br /> 我原本以為可以寫JSP來判斷所在網址來，是被導入iframe還是被開視窗顯示，因為被導入iframe的時候，網址會有個#，而獨立顯示則無，<br /> 但是後來發現被導入的iframe似乎不會執行任何jsp，獨立開新視窗的時候是OK，可以正常判斷所在網址，可是被導入iframe的時候，就似乎無法執行任何程式？<br /> 還是我可以用什麼方式來判斷嗎？我該在這些被導入的頁面，寫什麼樣的程式來判斷自己被導入iframe呢？<br /> 謝謝感激不盡希望你能夠看懂我問題！</p> </div> </article> </li> <li id="comment-642" class="comment odd alt thread-odd thread-alt depth-1"> <article id="div-comment-642" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <img alt='' src='https://secure.gravatar.com/avatar/164bb4a754e599f7f0eb8d09b5bccd1c?s=60&d=mm&r=g' srcset='https://secure.gravatar.com/avatar/164bb4a754e599f7f0eb8d09b5bccd1c?s=120&d=mm&r=g 2x' class='avatar avatar-60 photo' height='60' width='60' loading='lazy'/> <b class="fn">grissonlin</b> <span class="says">says:</span> </div> <div class="comment-metadata"> <a href="https://blog.ericsk.org/2007/03/02/%e5%88%a9%e7%94%a8-javascript-css-%e4%bd%9c-frame-%e7%9a%84%e6%95%88%e6%9e%9c/#comment-642"><time datetime="2009-07-27T12:40:22+00:00">July 27, 2009 at 12:40 pm</time></a> </div> </footer> <div class="comment-content"> <p>不好意思，我前面寫得太多<br /> 總結一句話是被導入iframe的頁面，有辦法用jsp來判斷自己在被導入iframe的狀態嗎？<br /> 謝謝。</p> </div> </article> </li> <li id="comment-643" class="comment even thread-even depth-1"> <article id="div-comment-643" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <img alt='' src='https://secure.gravatar.com/avatar/164bb4a754e599f7f0eb8d09b5bccd1c?s=60&d=mm&r=g' srcset='https://secure.gravatar.com/avatar/164bb4a754e599f7f0eb8d09b5bccd1c?s=120&d=mm&r=g 2x' class='avatar avatar-60 photo' height='60' width='60' loading='lazy'/> <b class="fn">grissonlin</b> <span class="says">says:</span> </div> <div class="comment-metadata"> <a href="https://blog.ericsk.org/2007/03/02/%e5%88%a9%e7%94%a8-javascript-css-%e4%bd%9c-frame-%e7%9a%84%e6%95%88%e6%9e%9c/#comment-643"><time datetime="2009-07-27T16:46:24+00:00">July 27, 2009 at 4:46 pm</time></a> </div> </footer> <div class="comment-content"> <p>我後來有加上 evalScripts: true 這段敘述可是仍然不會實行<br /> 也參考這篇去做了，http://www.javaeye.com/topic/24497<br /> 還是無法執行iframe 當中被導入的頁面裏頭所放的JS<br /> 程式</p> </div> </article> </li> <li id="comment-644" class="comment odd alt thread-odd thread-alt depth-1"> <article id="div-comment-644" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <img alt='' src='https://secure.gravatar.com/avatar/0c64ee4e0a6b1265bb22171ab85b05d4?s=60&d=mm&r=g' srcset='https://secure.gravatar.com/avatar/0c64ee4e0a6b1265bb22171ab85b05d4?s=120&d=mm&r=g 2x' class='avatar avatar-60 photo' height='60' width='60' loading='lazy'/> <b class="fn">崔弟</b> <span class="says">says:</span> </div> <div class="comment-metadata"> <a href="https://blog.ericsk.org/2007/03/02/%e5%88%a9%e7%94%a8-javascript-css-%e4%bd%9c-frame-%e7%9a%84%e6%95%88%e6%9e%9c/#comment-644"><time datetime="2009-12-16T09:38:25+00:00">December 16, 2009 at 9:38 am</time></a> </div> </footer> <div class="comment-content"> <p>請問一下<br /> 是不是使用這個之後<br /> 無法導入別的css檔<br /> ——————————————<br /> 例如：<br /> linkto(‘a.html’);<br /> 我在a.html中也有個css檔(aa.css)<br /> 但是按連結進入a.html之後，aa.css無法被載入<br /> 請問這無法更改了還是需要再修改哪邊的程式碼呢<br /> ——————————————<br /> 謝謝^^</p> </div> </article> </li> <li id="comment-645" class="comment even thread-even depth-1"> <article id="div-comment-645" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <img alt='' src='https://secure.gravatar.com/avatar/951a419268612c47c9c1e77f15a0bd08?s=60&d=mm&r=g' srcset='https://secure.gravatar.com/avatar/951a419268612c47c9c1e77f15a0bd08?s=120&d=mm&r=g 2x' class='avatar avatar-60 photo' height='60' width='60' loading='lazy'/> <b class="fn">black</b> <span class="says">says:</span> </div> <div class="comment-metadata"> <a href="https://blog.ericsk.org/2007/03/02/%e5%88%a9%e7%94%a8-javascript-css-%e4%bd%9c-frame-%e7%9a%84%e6%95%88%e6%9e%9c/#comment-645"><time datetime="2010-07-30T19:27:26+00:00">July 30, 2010 at 7:27 pm</time></a> </div> </footer> <div class="comment-content"> <p>版主您好,<br /> 我覺得這個方法很不錯，可是在firefox無法使用，因為我個人不會java script所以不知道是否修改哪一部份就可以讓firefox也可以秀出內容，謝謝!!<br /> 另外我有找到另外一個文章他也是可以做這個效果，在這裡提供給大家參考<br /> <a href="http://dob.tnc.edu.tw/DiscussShow.php?g=96224&s=0&t=0" rel="nofollow ugc">http://dob.tnc.edu.tw/DiscussShow.php?g=96224&s=0&t=0</a><br /> 但我比較喜歡版大的方法，這樣可以讓內容較整潔，只是是否有哪邊語法要修改或增加好讓firefox也可使用</p> </div> </article> </li> </ol> <p class="no-comments">Comments are closed.</p> </div> <nav class="navigation post-navigation" role="navigation" aria-label="Posts"> <h2 class="screen-reader-text">Post navigation</h2> <div class="nav-links"><div class="nav-previous"><a href="https://blog.ericsk.org/2007/03/01/adobe-%e6%89%93%e7%ae%97%e6%8e%a8%e5%87%ba%e7%b7%9a%e4%b8%8a%e7%89%88%e7%9a%84-photoshop/" rel="prev"><p class="meta-nav"><svg class="svg-icon" width="24" height="24" aria-hidden="true" role="img" focusable="false" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M20 13v-2H8l4-4-1-2-7 7 7 7 1-2-4-4z" fill="currentColor"/></svg>Previous Post</p><p class="post-title">Adobe 打算推出線上版的 Photoshop</p></a></div><div class="nav-next"><a href="https://blog.ericsk.org/2007/03/03/%e8%ab%8b%e5%bf%ab%e5%8d%87%e7%b4%9a%e8%87%b3-wordpress-212/" rel="next"><p class="meta-nav">Next Post<svg class="svg-icon" width="24" height="24" aria-hidden="true" role="img" focusable="false" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="m4 13v-2h12l-4-4 1-2 7 7-7 7-1-2 4-4z" fill="currentColor"/></svg></p><p class="post-title">請快升級至 WordPress 2.1.2</p></a></div></div> </nav> </main> </div> </div> <aside class="widget-area"> <section id="search-2" class="widget widget_search"><form role="search" method="get" class="search-form" action="https://blog.ericsk.org/"> <label for="search-form-1">Search…</label> <input type="search" id="search-form-1" class="search-field" value="" name="s" /> <input type="submit" class="search-submit" value="Search" /> </form> </section> <section id="recent-posts-2" class="widget widget_recent_entries"> <h2 class="widget-title">Recent Posts</h2><nav role="navigation" aria-label="Recent Posts"> <ul> <li> <a href="https://blog.ericsk.org/2014/02/27/%e5%af%ab%e5%9c%a8%e7%ac%ac%e5%9b%9b%e5%80%8b%e5%be%ae%e8%bb%9f%e5%b9%b4%e4%b9%8b%e5%89%8d/">寫在第四個微軟年之前</a> </li> <li> <a href="https://blog.ericsk.org/2013/02/26/%e5%91%8a%e5%88%a5%e5%be%ae%e8%bb%9f%e4%ba%8c%e5%b9%b4%e7%94%9f/">告別微軟二年生</a> </li> <li> <a href="https://blog.ericsk.org/2012/09/04/%e4%b8%8d%e7%8a%af%e9%8c%af%e7%9a%84%e4%ba%ba%e7%94%9f/">不犯錯的人生</a> </li> <li> <a href="https://blog.ericsk.org/2012/07/18/%e5%a3%ab%e5%a4%a7%e5%a4%ab%e7%9a%84%e5%9b%b0%e5%a2%83/">士大夫的困境</a> </li> <li> <a href="https://blog.ericsk.org/2012/06/14/python-on-windows-azure-%e7%b0%a1%e5%a0%b1%e5%85%ac%e9%96%8b/">Python on Windows Azure 簡報公開</a> </li> </ul> </nav></section><section id="recent-comments-2" class="widget widget_recent_comments"><h2 class="widget-title">Recent Comments</h2><nav role="navigation" aria-label="Recent Comments"><ul id="recentcomments"><li class="recentcomments"><span class="comment-author-link"><a href='http://webnas.bhes.ntpc.edu.tw/wordpress/archives/7697' rel='external nofollow ugc' class='url'>Django 課程研究 « 碧華國小資訊中心</a></span> on <a href="https://blog.ericsk.org/2007/11/23/%e7%94%a8-python-django-10%e5%88%86%e9%90%98%e5%85%a7%e4%bd%9c%e5%87%ba%e4%b8%80%e5%80%8b-blog/#comment-1343">用 Python + django 10分鐘內作出一個 blog</a></li><li class="recentcomments"><span class="comment-author-link"><a href='https://blog.patw.me/archives/471/html5-browser-access-location-notes/' rel='external nofollow ugc' class='url'>[HTML5] 瀏覽器取得定位筆記 - Partner Studio</a></span> on <a href="https://blog.ericsk.org/2009/08/11/%e5%a6%82%e4%bd%95%e5%9c%a8-mobile-web-app-%e4%b8%ad%e5%8f%96%e5%be%97%e5%ba%a7%e6%a8%99/#comment-2239">如何在 Mobile Web App 中取得座標</a></li><li class="recentcomments"><span class="comment-author-link"><a href='http://blog.wildsky.cc' rel='external nofollow ugc' class='url'>wildsky</a></span> on <a href="https://blog.ericsk.org/2007/04/16/%e5%88%86%e9%a1%9e%e7%9c%9f%e6%98%af%e4%b8%80%e9%96%80%e5%ad%b8%e5%95%8f/#comment-750">分類真是一門學問</a></li><li class="recentcomments"><span class="comment-author-link">Чзнг Ве Лиан</span> on <a href="https://blog.ericsk.org/2006/10/19/abbreviation-acronym-%e5%82%bb%e5%82%bb%e5%88%86%e4%b8%8d%e6%b8%85%e6%a5%9a/#comment-429">Abbreviation, Acronym 傻傻分不清楚</a></li><li class="recentcomments"><span class="comment-author-link">walkingskeleton</span> on <a href="https://blog.ericsk.org/2007/09/08/%e9%9b%a2%e9%96%8b%e5%ad%b8%e6%a0%a1%e4%b8%80%e5%b9%b4%e5%be%8c/#comment-1179">離開學校一年後…</a></li></ul></nav></section><section id="archives-2" class="widget widget_archive"><h2 class="widget-title">Archives</h2><nav role="navigation" aria-label="Archives"> <ul> <li><a href='https://blog.ericsk.org/2014/02/'>February 2014</a></li> <li><a href='https://blog.ericsk.org/2013/02/'>February 2013</a></li> <li><a href='https://blog.ericsk.org/2012/09/'>September 2012</a></li> <li><a href='https://blog.ericsk.org/2012/07/'>July 2012</a></li> <li><a href='https://blog.ericsk.org/2012/06/'>June 2012</a></li> <li><a href='https://blog.ericsk.org/2012/04/'>April 2012</a></li> <li><a href='https://blog.ericsk.org/2012/03/'>March 2012</a></li> <li><a href='https://blog.ericsk.org/2011/12/'>December 2011</a></li> <li><a href='https://blog.ericsk.org/2011/11/'>November 2011</a></li> <li><a href='https://blog.ericsk.org/2011/06/'>June 2011</a></li> <li><a href='https://blog.ericsk.org/2011/05/'>May 2011</a></li> <li><a href='https://blog.ericsk.org/2011/04/'>April 2011</a></li> <li><a href='https://blog.ericsk.org/2011/03/'>March 2011</a></li> <li><a href='https://blog.ericsk.org/2011/01/'>January 2011</a></li> <li><a href='https://blog.ericsk.org/2010/12/'>December 2010</a></li> <li><a href='https://blog.ericsk.org/2010/11/'>November 2010</a></li> <li><a href='https://blog.ericsk.org/2010/10/'>October 2010</a></li> <li><a href='https://blog.ericsk.org/2010/09/'>September 2010</a></li> <li><a href='https://blog.ericsk.org/2010/08/'>August 2010</a></li> <li><a href='https://blog.ericsk.org/2010/07/'>July 2010</a></li> <li><a href='https://blog.ericsk.org/2010/05/'>May 2010</a></li> <li><a href='https://blog.ericsk.org/2010/04/'>April 2010</a></li> <li><a href='https://blog.ericsk.org/2010/03/'>March 2010</a></li> <li><a href='https://blog.ericsk.org/2010/01/'>January 2010</a></li> <li><a href='https://blog.ericsk.org/2009/12/'>December 2009</a></li> <li><a href='https://blog.ericsk.org/2009/11/'>November 2009</a></li> <li><a href='https://blog.ericsk.org/2009/10/'>October 2009</a></li> <li><a href='https://blog.ericsk.org/2009/09/'>September 2009</a></li> <li><a href='https://blog.ericsk.org/2009/08/'>August 2009</a></li> <li><a href='https://blog.ericsk.org/2009/07/'>July 2009</a></li> <li><a href='https://blog.ericsk.org/2009/06/'>June 2009</a></li> <li><a href='https://blog.ericsk.org/2009/05/'>May 2009</a></li> <li><a href='https://blog.ericsk.org/2009/04/'>April 2009</a></li> <li><a href='https://blog.ericsk.org/2009/03/'>March 2009</a></li> <li><a href='https://blog.ericsk.org/2009/02/'>February 2009</a></li> <li><a href='https://blog.ericsk.org/2009/01/'>January 2009</a></li> <li><a href='https://blog.ericsk.org/2008/12/'>December 2008</a></li> <li><a href='https://blog.ericsk.org/2008/11/'>November 2008</a></li> <li><a href='https://blog.ericsk.org/2008/10/'>October 2008</a></li> <li><a href='https://blog.ericsk.org/2008/09/'>September 2008</a></li> <li><a href='https://blog.ericsk.org/2008/08/'>August 2008</a></li> <li><a href='https://blog.ericsk.org/2008/07/'>July 2008</a></li> <li><a href='https://blog.ericsk.org/2008/06/'>June 2008</a></li> <li><a href='https://blog.ericsk.org/2008/05/'>May 2008</a></li> <li><a href='https://blog.ericsk.org/2008/04/'>April 2008</a></li> <li><a href='https://blog.ericsk.org/2008/03/'>March 2008</a></li> <li><a href='https://blog.ericsk.org/2008/02/'>February 2008</a></li> <li><a href='https://blog.ericsk.org/2008/01/'>January 2008</a></li> <li><a href='https://blog.ericsk.org/2007/12/'>December 2007</a></li> <li><a href='https://blog.ericsk.org/2007/11/'>November 2007</a></li> <li><a href='https://blog.ericsk.org/2007/10/'>October 2007</a></li> <li><a href='https://blog.ericsk.org/2007/09/'>September 2007</a></li> <li><a href='https://blog.ericsk.org/2007/08/'>August 2007</a></li> <li><a href='https://blog.ericsk.org/2007/07/'>July 2007</a></li> <li><a href='https://blog.ericsk.org/2007/06/'>June 2007</a></li> <li><a href='https://blog.ericsk.org/2007/05/'>May 2007</a></li> <li><a href='https://blog.ericsk.org/2007/04/'>April 2007</a></li> <li><a href='https://blog.ericsk.org/2007/03/'>March 2007</a></li> <li><a href='https://blog.ericsk.org/2007/02/'>February 2007</a></li> <li><a href='https://blog.ericsk.org/2007/01/'>January 2007</a></li> <li><a href='https://blog.ericsk.org/2006/12/'>December 2006</a></li> <li><a href='https://blog.ericsk.org/2006/11/'>November 2006</a></li> <li><a href='https://blog.ericsk.org/2006/10/'>October 2006</a></li> <li><a href='https://blog.ericsk.org/2006/09/'>September 2006</a></li> <li><a href='https://blog.ericsk.org/2006/08/'>August 2006</a></li> <li><a href='https://blog.ericsk.org/2006/07/'>July 2006</a></li> <li><a href='https://blog.ericsk.org/2006/06/'>June 2006</a></li> <li><a href='https://blog.ericsk.org/2006/05/'>May 2006</a></li> <li><a href='https://blog.ericsk.org/2006/04/'>April 2006</a></li> <li><a href='https://blog.ericsk.org/2006/03/'>March 2006</a></li> <li><a href='https://blog.ericsk.org/2006/02/'>February 2006</a></li> <li><a href='https://blog.ericsk.org/2006/01/'>January 2006</a></li> <li><a href='https://blog.ericsk.org/2005/12/'>December 2005</a></li> <li><a href='https://blog.ericsk.org/2005/11/'>November 2005</a></li> <li><a href='https://blog.ericsk.org/2005/09/'>September 2005</a></li> <li><a href='https://blog.ericsk.org/2005/08/'>August 2005</a></li> <li><a href='https://blog.ericsk.org/2005/07/'>July 2005</a></li> </ul> </nav></section><section id="categories-2" class="widget widget_categories"><h2 class="widget-title">Categories</h2><nav role="navigation" aria-label="Categories"> <ul> <li class="cat-item cat-item-1"><a href="https://blog.ericsk.org/category/uncategorized/">Uncategorized</a> </li> <li class="cat-item cat-item-2"><a href="https://blog.ericsk.org/category/wdc/">WDC</a> </li> <li class="cat-item cat-item-3"><a href="https://blog.ericsk.org/category/creation/">不是創作</a> </li> <li class="cat-item cat-item-4"><a href="https://blog.ericsk.org/category/trip/">到處走走</a> </li> <li class="cat-item cat-item-5"><a href="https://blog.ericsk.org/category/food/">吃吃喝喝</a> </li> <li class="cat-item cat-item-6"><a href="https://blog.ericsk.org/category/memorial/">回想當年</a> </li> <li class="cat-item cat-item-7"><a href="https://blog.ericsk.org/category/photos/">好圖共賞</a> </li> <li class="cat-item cat-item-8"><a href="https://blog.ericsk.org/category/books/">好書共賞</a> </li> <li class="cat-item cat-item-9"><a href="https://blog.ericsk.org/category/av/">影音娛樂</a> </li> <li class="cat-item cat-item-10"><a href="https://blog.ericsk.org/category/comment/">我有話說</a> </li> <li class="cat-item cat-item-11"><a href="https://blog.ericsk.org/category/%e6%95%97%e5%ae%b6/">敗家</a> </li> <li class="cat-item cat-item-12"><a href="https://blog.ericsk.org/category/life/">生活逸趣</a> </li> <li class="cat-item cat-item-13"><a href="https://blog.ericsk.org/category/programming/">程式設計</a> </li> <li class="cat-item cat-item-14"><a href="https://blog.ericsk.org/category/announcement/">站方公告</a> </li> <li class="cat-item cat-item-15"><a href="https://blog.ericsk.org/category/internet/">網際網路</a> </li> <li class="cat-item cat-item-16"><a href="https://blog.ericsk.org/category/%e8%a1%8c%e5%8b%95%e9%80%9a%e8%a8%8a/">行動通訊</a> </li> <li class="cat-item cat-item-17"><a href="https://blog.ericsk.org/category/computer-science/">資訊科學</a> </li> <li class="cat-item cat-item-18"><a href="https://blog.ericsk.org/category/nature/">賞大自然</a> </li> <li class="cat-item cat-item-19"><a href="https://blog.ericsk.org/category/websites/">逛逛網站</a> </li> <li class="cat-item cat-item-20"><a href="https://blog.ericsk.org/category/school/">關於學校</a> </li> <li class="cat-item cat-item-21"><a href="https://blog.ericsk.org/category/%e9%97%9c%e6%96%bc%e5%b7%a5%e4%bd%9c/">關於工作</a> </li> <li class="cat-item cat-item-22"><a href="https://blog.ericsk.org/category/myself/">關於自己</a> </li> <li class="cat-item cat-item-23"><a href="https://blog.ericsk.org/category/writing/">隨意亂寫</a> </li> <li class="cat-item cat-item-24"><a href="https://blog.ericsk.org/category/hardware/">電腦硬體</a> </li> <li class="cat-item cat-item-25"><a href="https://blog.ericsk.org/category/system/">電腦系統</a> </li> <li class="cat-item cat-item-26"><a href="https://blog.ericsk.org/category/software/">電腦軟體</a> </li> </ul> </nav></section><section id="meta-2" class="widget widget_meta"><h2 class="widget-title">Meta</h2><nav role="navigation" aria-label="Meta"> <ul> <li><a href="https://blog.ericsk.org/wp-login.php">Log in</a></li> <li><a href="https://blog.ericsk.org/feed/">Entries feed</a></li> <li><a href="https://blog.ericsk.org/comments/feed/">Comments feed</a></li> <li><a href="https://wordpress.org/">WordPress.org</a></li> </ul> </nav></section> </aside> <footer id="colophon" class="site-footer" role="contentinfo"> <div class="site-info"> <div class="site-name"> <a href="https://blog.ericsk.org/">ericsk's blog (archived)</a> </div> <div class="powered-by"> Proudly powered by <a href="https://wordpress.org/">WordPress</a>. </div> </div> </footer> </div> <script>document.body.classList.remove("no-js");</script> <script> if ( -1 !== navigator.userAgent.indexOf( 'MSIE' ) || -1 !== navigator.appVersion.indexOf( 'Trident/' ) ) { document.body.classList.add( 'is-IE' ); } </script> <script src='https://blog.ericsk.org/wp-content/themes/twentytwentyone/assets/js/polyfills.js?ver=1.0' id='twenty-twenty-one-ie11-polyfills-js'></script> <script src='https://blog.ericsk.org/wp-content/themes/twentytwentyone/assets/js/responsive-embeds.js?ver=1.0' id='twenty-twenty-one-responsive-embeds-script-js'></script> <script src='https://blog.ericsk.org/wp-includes/js/wp-embed.min.js?ver=5.6' id='wp-embed-js'></script> <script> /(trident|msie)/i.test(navigator.userAgent)&&document.getElementById&&window.addEventListener&&window.addEventListener("hashchange",(function(){var t,e=location.hash.substring(1);/^[A-z0-9_-]+$/.test(e)&&(t=document.getElementById(e))&&(/^(?:a|select|input|button|textarea)$/i.test(t.tagName)||(t.tabIndex=-1),t.focus())}),!1); </script> </body> </html>