使用 IntraWeb (9) - JavaScript

IW 依賴 js 構建(我數了數, 在當前版本它的資源文件默認攜帶了 26 個 js); 

但 IW 儘量地讓用戶少用或不用 js, 但若是你對 js 也不陌生, IW 提供了多種途徑與方便. 我給它分兩大類:

一、直接寫入 js 代碼(站點級、頁面級, 還能夠精確地指定插入位置); 

二、連接 *.js 文件(外鏈、內鏈, 還能夠是資源文件).javascript



首先應該說明: IW 已經霸佔了 window.onload, 用戶在 js 中不能再使用 onload. 若是你有一個 js 文件或模板沒有如期運做, 或許是這個緣由; 不過好像僅此一個, 剩下的都是方便了.

還有: 在 IW 中能夠直接使用 jQuery, 當前版本攜帶的是: jQuery 1.8.2css



1.1 - 使用窗體的 AddToInitProc 插入初始化的 js 代碼java


 
procedure TIWForm1.IWAppFormCreate(Sender: TObject); begin   AddToInitProc('alert("歡迎")');  //其中的 js 代碼最終會被 window.onload 調用 end; 


1.2 - 在控件的 ScriptEvents 屬性中添加 js 代碼編輯器


 
procedure TIWForm1.IWAppFormCreate(Sender: TObject); begin   IWButton1.ScriptEvents.Values['onclick'] := 'alert(this.name)'//這裏的代碼都應該很簡單, 主要是函數調用 end; {這在設計時更方便:} 




1.3 - 能夠把 js 函數寫在窗體的 JavaScripts 屬性中函數


 
//若是不是使用 js 文件, 就應該把 js 函數都寫在 JavaScripts 屬性中 procedure TIWForm1.IWAppFormCreate(Sender: TObject); begin   JavaScript.Text := 'function MyFun1() {alert("TIWForm1.JavaScripts");}';   IWButton1.ScriptEvents.Values['onclick'] := 'MyFun1()'; end; {建議在設計時使用 JavaScripts 屬性} 


1.4 - 只執行一次的 js 代碼:工具


 
procedure TIWForm1.IWAppFormCreate(Sender: TObject); begin   JavaScriptOnce := 'alert("JavaScriptOnce")'; end; 


1.5 - 若是要進行精確的定位插入, 須要用到窗體的 PageContext 屬性測試


 
//PageContext 對象提供了更多插入方法, 下面幾個只是我找到執行順序的(下面次序就是我測試出的執行順序) PageContext.JavaScript; PageContext.AddToJavaScriptOnce(); PageContext.AddToOnReady(); PageContext.AddToInitProc(); PageContext.AddToIWCLInitProc(); PageContext.AddToInitProcPageUnlockCode(); PageContext.AddToInitProcFocusCode(); PageContext.AddToInitProcNewWindowCode(); PageContext.AddToInitProcDoLastCode(); 


2.1 - 直接 Html 的 <Head></Head> 插入連接或代碼this


 
{在 TIWServerController 的 onCreate 事件中插入全站級的 js 連接} procedure TIWServerController.IWServerControllerBaseCreate(Sender: TObject); begin   HTMLHeaders.Add('<script type="text/javascript" src="/My1.js"></script>');  //內鏈, 文件位於 wwwroot   HTMLHeaders.Add('<script type="text/javascript" src="Http://.../My2.js"></script>'); //外鏈, 全路徑 end; //注: wwwroot 是 IW 的默認根目錄, js、css 和圖片等等都應該放在其中; 可經過 IWServerController.ContentPath 讀取其實際路徑 {在窗體的 OnCreate 事件中插入頁面級的 js 連接} procedure TIWForm1.IWAppFormCreate(Sender: TObject); begin   PreHeader.Add('<script type="text/javascript" src="/My3.js"></script>');  //這個在前; 但在 IWServerController.HTMLHeaders 以後   ExtraHeader.Add('<script type="text/javascript" src="/My4.js"></script>'); //這個在後 end; //注: 上面兩個操做均可以在設計時. //其實若是在 Head 中連接 js 或 css 應該使用 ContentFiles, 上面的嵌入方法跟適於...譬如: procedure TIWServerController.IWServerControllerBaseCreate(Sender: TObject); begin   HTMLHeaders.Add('<meta name="Keywords" content="萬一,Delphi,IntraWeb"/>');  //指定搜索關鍵字 end; 


2.2 - 使用 ContentFiles 方法連接 js 或 cssspa


 
{站點級 - ServerController.pas} procedure TIWServerController.IWServerControllerBaseCreate(Sender: TObject); begin   ContentFiles.Add('My1.js'); //內鏈, 文件位於 wwwroot; 固然也能夠外鏈 end; {頁面級 - Unit1.pas} procedure TIWForm1.IWAppFormCreate(Sender: TObject); begin   ContentFiles.Add('My2.js');      //內鏈, 文件位於 wwwroot; 固然也能夠外鏈   ContentFiles.Add('MyJs/My3.js'); //內鏈 wwwroot/MyJs/My3.js end; //ContentFiles 會自動轉換爲 Html 須要的格式, 因此很方便 


2.3 - 使用 PageContext 的方法設計


 
procedure TIWForm1.IWAppFormCreate(Sender: TObject); begin   PageContext.PreScriptFiles.Add('My4.js');   PageContext.AddScriptFile('My5.js'); end; 


2.4 - 把 js 嵌入到資源文件, 並調用


先從 Project > Resources and Images... 把一個 js 添加到資源文件:



這個主要是 IW 內部使用的, 其規則很玄妙. 做爲 JS 資源必須是 IW_JS_ 開頭, 好像對使用的字符也有限制.

另外這個資源編輯器, 從出生到如今都有點小問題, 從新打開隨便點點就行了.
 

 
{下面是調用代碼:} uses IWServerInternalFiles; //爲使用 gInternalFiles {從資源中提取 js; 若是不單單是該頁使用, 應該是從 ServerController 單元} procedure TIWForm1.IWAppFormCreate(Sender: TObject); begin   gInternalFiles.Add('IW_JS_MyJS', '/js/MyJS.js'); //第一個參數資源文件名;                                                   //第二個參數是目的(內部臨時文件名), 必須是 /js/xxx.js (好像 xxx 也要求和資源文件的定義同名)   {啓用從資源提取的 js}   PageContext.ScriptFiles.Add('/js/MyJS.js'); end; 


3.1 - IW 給控件在 Html 中的重命名規則


 
//規則是 "控件名"(轉大寫) + "IWCL" //假如點擊 IWButton1 給 IWMemo1 輸入內容: procedure TIWForm1.IWButton1Click(Sender: TObject); begin   IWMemo1.Text := 'Delphi Hi'; end; //但這要經過 js 實現應該是: procedure TIWForm1.IWAppFormCreate(Sender: TObject); begin   IWButton1.ScriptEvents.Values['onclick'] := 'IWMEMO1IWCL.value = "Js Hi"'; end; 


3.2 - 解決衝突


 
procedure TIWForm1.IWAppFormCreate(Sender: TObject); begin   IWButton1.ScriptEvents.Values['onclick'] := 'alert(1)'; //若是是這樣, 哪下面的 IWButton1.OnClick 就不會執行了 //  IWButton1.ScriptEvents.Values['onclick'] := 'alert(1); return true;'; //返回(真)一下就行了 end; procedure TIWForm1.IWButton1Click(Sender: TObject); begin   WebApplication.ShowMessage('2'); end; 


3.3 - 使用 ScriptEvents 的 Add() 與 HookEvent() 方法添加 js 代碼


 
procedure TIWForm1.IWAppFormCreate(Sender: TObject); begin   JavaScript.Text := 'function JsFun1(obj) { alert(obj.id); }';   IWButton1.ScriptEvents.HookEvent('onclick', 'JsFun1(this)');   IWLabel1.ScriptEvents.HookEvent('onclick', 'JsFun1(this)');   IWButton2.ScriptEvents.HookEvent('onclick', 'alert(this.id);');   IWButton3.ScriptEvents.Add('onclick').EventCode.Text := 'alert(this.id);'; end; 


IW 還有相關調試的內容, 好的 js 編輯與調試工具太多了, 不必使用 IW 寫 js 或調試.

相關文章
相關標籤/搜索