網頁之間的參數傳遞

不知道有多少人跟我一樣, 在剛接觸 Web Development(javascript) 時, 最想知道的答案的三大問題之一就是: 我要怎麼傳參數到另一個網頁呀 ?

就我目前的學習成果裡, 用了兩種方法, 而這兩種方法適用的地方不同.

一般的網頁利用 location.href

一般網頁是指像以 <a> 開啟的頁面, 可以 href 連結後方加入?的參數, 就像呼叫後端php程式一樣:

<a href="http://domain.com/new_page.html?name=vito&country=taiwan">new page</a>

在new_page.html 被載入後,即可讀取 location.href 取得完整 URL, 然後再利用 parseQuery 做解析工作, 得出參數.

function parseQuery ( query ) {
   var Params = new Object ();
   if ( ! query ) return Params; // return empty object
   var Pairs = query.split(/[;&]/);
   for ( var i = 0; i < Pairs.length; i++ ) {
      var KeyVal = Pairs[i].split('=');
      if ( ! KeyVal || KeyVal.length != 2 ) continue;
      var key = unescape( KeyVal[0] );
      var val = unescape( KeyVal[1] );
      val = val.replace(/\+/g, ' ');
      Params[key] = val;
   }
   return Params;
}

var params = parseQuery(location.href.replace(/^[^\?]+\??/,''));
v1 = params["name"]  //  vito
v2 = params["country"]  //  taiwan

註:parseQuery是我在 jQuery 的一個 plugin 內發掘出來的 function, 蠻好用的. 不過後來發現在一些 blog 都有提到這個 function, 所以真正來源目前我不清楚.

AJAX 載入的網頁, 不可使用 location.href, 可運用全域變數

由於使用 ajax 載入的網頁, 並未真的更新網頁, 因此 location.href 不會改變, 也就無法利用 location.href 了, 但也因此表示在 javascript 使用宣告的變數, new_page.html 是可以讀得到的(就像在同一個網頁), 當然, 我們要將全域變數管好啦.

AJAX 載入的網頁, 在 tag 內定義自訂的屬性, 當作參數

很多時候是藉由 click <a>, <img> 等 tag 觸發一個 function, 使用 ajax 技術載入一個網頁, 此時可在這個 tag 定義特殊的屬性, 當 click 觸發 function 時, 再讀取這個 element 的屬性值, 對載入的網頁做變化.

附註:
使用 ajax 載入網頁很困難嗎? 非也, 運用 jQuery, 只要一行 ajax 就收工了:

$("#product_wrapper").load("product_page.html");

假設 html 有個 div tag, id="product_wrapper".
以上 code 的意思是, 將 product_page.html 載入到 id="product_wrapper" 的 element 內.

幾個製作 Blogger 網頁時遇到的問題

在製作彩油的展示與選取頁面時, 遇到不少問題, 在此記錄:



* Blogger 使用的是 UTF8 格式的檔案, .js 檔案內可能會有中文資料, 若不是以 UTF8 存檔, 可能會造成執行時期的錯誤.



* Blogger 內的文章可以貼入 <script>....</script>, 但卻不可貼入 <style>...</style>, Blogger 會自動將 <style> 及其內的所有資料全部移除, 所以放了也沒用. 因此 <style> 變成只能靠修改 template 置入. 但 template 卻是所有文章共用的區域, 久了不但 template 會變得複雜混亂, 也會使整體網頁顯示變慢. 拜這個問題所賜, 讓我找到了動態讀取 css 及 javascript 檔案的方法:

function loadCSS(css_filename) {
  var css=document.createElement('link');
  css.setAttribute('rel', 'stylesheet');
  css.setAttribute('type', 'text/css');
  css.setAttribute('href', css_filename);
  document.getElementsByTagName('head')[0].appendChild(css);
}
function loadScript(script_filename) {  
  var js = document.createElement('script');
  js.setAttribute('language', 'javascript1.2');
  js.setAttribute('type', 'text/javascript');
  js.setAttribute('src', script_filename);
  document.getElementsByTagName('head')[0].appendChild(js);
}  

呼叫上述的 code, 就可以擺脫使用 html tag 載入 css 與 js 的命運, 以 javascript 來呼叫載入.

update:沒多久就發現其實 jQuery 早已有 require 的 plugin, 真好. 不過目前暫時先用上面的方案就好了.



* 在使用 thickbox plugin 時遇上了奇怪的問題, 後來發現是 thickbox 內呼叫 jQuery 的 $("...").load 方法載入 html 檔案, 在這裡某些時候有問題. 這個方法使用形式是 load( url, params, callback ), 問題在 url 參數. 若傳入 url 是完整的, 像 "http://domain.com/html/page.html" 的話, 就會有點像當掉一樣, 停留在這裡; 若 url 只傳檔案名稱, 像 "page.html" 的話, 就可正常執行. 為什麼目前不得而知, 只好暫時避免以 ajax 的方式使用 thickbox, 改用 inline 的方式就沒問題了, iframe 的方式則還沒用過.

jQuery

最近其實也在為學習 javascript 傷腦筋, 不過今天找到了 jQuery, 是一個 javascript framework, 提供新的開發 js 的方式, 感覺上不但可以降低學習曲線, 提昇工作效率, 還可以解決跨瀏覽器的問題. 我想再花點時間深入 survey, 沒什麼問題就先學 jQuery 吧

jQuery - 官方網站

INTERFACE ELEMENTS for jQuery - Demo - 可以到這裡看看使用 jQuery 能做到那些效果.

jQuery中文入門指南，翻譯加實例，jQuery的起點教程 - 網友 Keel 翻譯自 Gtting Started with jQuery 的文章

Keel's blog

Racklin's 阿土伯程式大觀園