動態載入頁面並執行的實例詳解

ExtJS 4.1 TabPanel動態載入頁面並執行腳本，寫這個東西我寫了好幾天，但是寫完之後就會有滿滿的成就感，我終於成功了，挺興奮的，下面就來向大家介紹我寫程式的整個過程。

依照官方範例，可以動態載入頁面，可是腳本不執行，於是查SDK、google，發現scripts需要設定為true，於是設定該屬性，整個程式碼如下

tabPanel.add({
title: 'dynamic page',
closable: true,
loader: { 'test.htm', loadMask: 'loading...', autoLoad: true, scripts: true }
});

剛開始以為載入頁面的腳本寫的有問題，因為查了很多資料，有人說要寫在6c04bd5ca3fcae76e30b72ad730ca86d裡面，有人說只能寫在頁面上，不能用src引用js文件，但無論怎麼試也不行，我的載入頁面很簡單，只要頁面被載入就出彈窗

<script type="text/javascript">
alert("addd");
</script>
后来想，是不是需要在tab被激活的事件手工load，而不是autoLoad，于是再次实验，终于成功了，兴奋！
tabPanel.add({
title: &#39;dynamic page&#39;,
closable: true,
loader: { &#39;test.htm&#39;, loadMask: &#39;loading...&#39;, autoLoad: true, scripts: true }
 listeners: { activate: function(tab){ tab.loader.load(); } }
});

本來想著到此為止，一天時間總算搞定這個tab，但是興奮之餘發現，該做法是有問題的，每次點擊tab，都會觸發啟動事件，去讀取後台頁面一次，而我想要的效果是，前台載入一次之後，切換tab也不要再造訪後台。於是查SDK、google，想在activate事件裡，判斷tab已經load，但是未果

第二天，去掉了listeners，然後莫名其妙想測試加載頁面的loading效果，特意將頁面線程阻止，加入以下程式碼

System.Threading.Thread.Sleep(5000);

這次是無心插柳，發現隔了5秒載入的頁面，居然能正常執行腳本了！

我的操作步驟如下：點了載入按鈕，然後點選動態載入的tab，該tab無內容，隔了5秒，內容出現，腳本執行

但是被載入的頁面不能總是被sleep，於是繼續查資料繼續試，甚至開始調試extjs的源代碼，這裡說下如何調試，頁面切換以下腳本

<script type="text/javascript"
src="/Scripts/ext/ext-all.js?1.1.11"></script>改为
<script type="text/javascript"
src="/Scripts/ext/ext-debug.js?1.1.11"></script>

如何調試就不解釋了，google多的是，調試了一天，無果。不過對extjs的程式碼算是有了第一次親密接觸

而且還發現一個奇怪的事情，在調試的時候，就算加入了Sleep(5000)，載入的頁面腳本也無法執行，越來越納悶

第三天，狂加QQ群，各論壇網站發帖，繼續google，無果

第四天，算是我點幸，用微軟的bing搜索autoload:true, scripts:true，出來的第條，就有這樣的介紹，不過是說extjs 4.0的panel如何載入頁面執行腳本的，於是依照它的程式碼測試

Ext.onReady(function () {
  var panel = Ext.create('Ext.Panel', {
  title: 'Anchor
Layout',  
  renderTo:Ext.getBody(),  
  loader:{ url: "test.htm",autoLoad:true,
scripts:true}//加载1.htm页面
  });
  });

該程式碼居然能成功執行！這下徹底興奮了，因為tab可以載入任意的component，當然也可以載入panel，於是修改我的程式碼

var panel = Ext.create('Ext.Panel',{
title: 'dynamic page',
renderTo:Ext.getBody(),
closable: true,
loader: { 'test.htm', loadMask: 'loading...', autoLoad: true,
scripts: true }
});
tabPanel.add(panel);

成功了！真的狂喜，花費4天下來，總算是有個好的結果，這種喜悅，只有我們技術人員才能理解到

比較代碼差異，發現就少了這麼一個配置，就是我上面黃色標示出來的，renderTo:Ext.getBody()，居然，居然要被render一下，才能正常顯示腳本，為什麼SDK沒有！ ！

但是，但是…這也不是一個完美的解決辦法，細心的朋友就知道，該腳本會把加載頁面首先加載到主頁面上，切換tab才會消失，這麼嚴重的問題，因為當時太興奮，居然沒有發現，唉。

不得不停下來敲鍵盤的手，仔細思考起來，我有3次加載頁面執行腳本成功，這3次分別是

1、tab被activate的事件中

2、sleep之後點選tab等待頁面載入好

3、加入renderTo配置

經過長時間思考，終於發現這3次成功的時候，都有個共同點，載入的頁面被顯示出來了，也就說，如果tab先load頁面，然後再“被看見”，那腳本就不執行了

為了驗證我的想法，於是馬上動手測試，把sleep設為100毫秒，點選載入鈕，隔了1秒再去看載入出來的tab，果然腳本不執行了！ ！ ！

總算找到原因：tab必須先「展現」出來，然後再去load，那這就簡單了，馬上查SDK，不難發現show這個方法，於是修改程式碼

tabs.add({
title: 'dynamic page',
//renderTo: Ext.getBody(),
loader: {
url: 'test.htm',
loadMask: 'loading...',
autoLoad: true,
scripts: true
}
}).show();

OK，腳本正常執行，到此我的問題「完美」解決

以上是動態載入頁面並執行的實例詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！