利用Javascript的getSelection()搜尋頁面裡的字串,再用document.execCommand()標注出來,就可以完成一個簡易的頁面搜尋功能了。
HTML部份:
輸入關鍵字查詢 <input type="text" size=8 id="search"> <input type="button" id="button" onclick="doSearch($('#search').val())" value="查詢"> <p>自從RWD開始被推展之後,大家都一窩蜂什麼都要做成RWD</p> <p>這一篇就先來說說缺點吧~</p> <ul> <li><span style="color: #ff6600;">所有的載具都讀取同⼀份網⾴,⼿機或平板效能⽐較差的載具,會有讀取速度較慢的問題</span></li> </ul> <p>RWD網頁最大的優點就是不管在什麼載具,都是讀取同一份html檔,但也就是因為這樣,不同的載具效能不同,就會呈現不同的效果,如果網頁是需要很多特效的話,那就只能盼望使用者的載具(手機、平板)都可以有像電腦一樣的硬體等級了。</p> <ul> <li><span style="color: #ff6600;">內容影響整體閱讀,不適合過於複雜的排版與內容</span></li> </ul> <p>RWD網頁在設計時通常還是會針對手機版做比較特比的規劃,畢竟手機的螢幕大小有限,比較不適合把所有東西都塞在一個頁面裡呈現。</p> <ul> <li><span style="color: #ff6600;">舊瀏覽器⽀援度⽐較差 (ex : IE7 IE8 IE9)</span></li> </ul> <p>只能說IE真是所有網頁開發人員的痛阿…真希望它趕快跟上腳步,或乾脆放棄了吧~</p> <ul> <li><span style="color: #ff6600;">開發時間與成本比傳統方式多</span></li> </ul> <p>RWD網頁是在後續維護比較省時間(因為只要更新一份html),但開發可就不是這麼一回事,在製作過程需要一直比對各載具的相容性(版面、效能),所以開發時間可不是兩個平台就兩倍時間這麼簡單的事情。</p>
Javascript部份:
function doSearch(text) { var isfound=0; if (window.find && window.getSelection) { document.designMode = "on"; var sel = window.getSelection(); sel.collapseToEnd(); isfound=0; while (window.find(text)) { $("#button").blur(); document.execCommand("HiliteColor", false, "aquamarine"); sel.collapseToEnd(); isfound=1; } if (isfound == 0) { alert('cant find'); } document.designMode = "off"; } }