【轉】關於easyui的窗口和tab頁面不執行js說明

原地址：http://www.jeasyuicn.com/post-49.htmljavascript

一直以來羣裏裏面不少人反應，在用tab加載界面的時候，界面裏面的js不會執行。今天GodSon在此說明一下緣由。css

無論是window，dailog仍是tab其實質最終都是繼承了panel。panel有兩種方式展現內容。第一是直接硬編碼寫到出來。第二是經過href屬性，加載外部html片斷。在這裏就就設計到了一個html片斷的概念。這個概念在easyui的總體架構中，是一個很重要的概念，由於不少人沒弄明白，因此從中引起出了不少問題。我舉個例子來講明html片斷。html

你們都知道html的標準結構是:java

 
      1 
      <html> 
     
      2 
      <head> 
     
      3 
          <title>這是完整的html結構</title> 
     
      4 
          <script></script> 
     
      5 
      </head> 
     
      6 
      <body> 
     
      7 
      <div>內容</div> 
     
      8 
      </body> 
     
      9 
      </html>

通常咱們寫html代碼都應該遵循此此結構。而所謂的html片斷就是上面完整結構中的內容部分。web

 
      1 
      <div>內容</div>

雖然咱們也會創建一個文件如b.html來保存html片斷，可是在這個b.html中咱們只須要編寫<body>裏面的內容不須要在把html的標準結構寫出來。ajax

好了瞭解html片斷的概念，就來講下我在使用個easyui的過程會大量出現的html片斷。架構

其實在使用easyui中你沒嵌入iframe的話，除了index界面會有完整的html結構，其餘的全部界面都以html片斷的形式存在。就那tab來講，首先在界面上定義一個tabsapp

 
      01 
      <html> 
     
      02 
      <head> 
     
      03 
      <title>tab測試界面</title> 
     
      04 
      </head> 
     
      05 
      <body> 
     
      06 
      <div class="easyui-tabs" fit="true" plain="true" style="height:100px;width:300px;"> 
     
      07 
          <div title="Title1" style="padding:10px;" href="tabs_href_test.html"></div> 
     
      08 
          <div title="Title2" style="padding:10px;">Content 2</div> 
     
      09 
          <div title="Title3" style="padding:10px;">Content 3</div> 
     
      10 
      </div> 
     
      11 
      </body> 
     
      12 
      </html>

看到上面片斷的title=」Title1「處我定義了一個tab其中使用了href屬性，就代表改此處是要從外部加載一個html片斷來顯示tab的內容。下面是我定義的tabs_href_test.html的內容post

 
      1 
      <script type="text/javascript" src="test.js"></script> 
     
      2 
      <script>alert("我是外部加載的html片斷");</script> 
     
      3 
      <div><p>我是外部加載的html片斷</p></div>

test.js的內容：測試

 
      1 
      alert("我是外部界面導入的js");

在此確定會有不少人告訴我，我是這樣寫的，可是個人js根本就不執行。其實否則，我看到過不少要我解決類是問題的人，發給我看的代碼。假如tabs_href_test.html是他們引入的外部界面，都會是以下這樣的一個完整的結構

 
      01 
      <html> 
     
      02 
      <head> 
     
      03 
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
     
      04 
      <title>Tabs - jQuery EasyUI Demo</title> 
     
      05 
        <script type="text/javascript" src="test.js"></script> 
     
      06 
        <script>alert("我是外部加載的html片斷");</script> 
     
      07 
      </head> 
     
      08 
      <body> 
     
      09 
        <div><p>我是外部加載的html片斷</p></div> 
     
      10 
      </body> 
     
      11 
      </html>

他們都會問他們的js爲何不會執行。其實問題就在這裏tabs_href_test.html界面最終實際上是jq經過ajax請求過來內容，在append到目標區域。而經過ajax請求方法的responseText又只會抓去完整html片斷中<body>裏面的內容。正好他們把他們的js寫在了body外面因此致使js沒執行。這確的寫法是在引入的界面當中不要出現<html><head><body>三個標籤。由於這只是一個片斷，你加載這一個片斷只是爲了動態嵌入到主界面當中某一個部分顯示出來，不是一個完整的頁面。

最後總結若是你應該用了easyui中加載外部界面的組件，例如：panel,window，dailog,tabs等。請確保你引入的界面是一個html片斷。html片斷正確的寫法再次提醒不要出現<html><head><body>三個標籤：

一直以來羣裏裏面不少人反應，在用tab加載界面的時候，界面裏面的js不會執行。今天GodSon在此說明一下緣由。

你們都知道html的標準結構是:

 
      1 
      <html> 
     
      2 
      <head> 
     
      3 
          <title>這是完整的html結構</title> 
     
      4 
          <script></script> 
     
      5 
      </head> 
     
      6 
      <body> 
     
      7 
      <div>內容</div> 
     
      8 
      </body> 
     
      9 
      </html>

通常咱們寫html代碼都應該遵循此此結構。而所謂的html片斷就是上面完整結構中的內容部分。

 
      1 
      <div>內容</div>

雖然咱們也會創建一個文件如b.html來保存html片斷，可是在這個b.html中咱們只須要編寫<body>裏面的內容不須要在把html的標準結構寫出來。

好了瞭解html片斷的概念，就來講下我在使用個easyui的過程會大量出現的html片斷。

其實在使用easyui中你沒嵌入iframe的話，除了index界面會有完整的html結構，其餘的全部界面都以html片斷的形式存在。就那tab來講，首先在界面上定義一個tabs

 
      01 
      <html> 
     
      02 
      <head> 
     
      03 
      <title>tab測試界面</title> 
     
      04 
      </head> 
     
      05 
      <body> 
     
      06 
      <div class="easyui-tabs" fit="true" plain="true" style="height:100px;width:300px;"> 
     
      07 
          <div title="Title1" style="padding:10px;" href="tabs_href_test.html"></div> 
     
      08 
          <div title="Title2" style="padding:10px;">Content 2</div> 
     
      09 
          <div title="Title3" style="padding:10px;">Content 3</div> 
     
      10 
      </div> 
     
      11 
      </body> 
     
      12 
      </html>

看到上面片斷的title=」Title1「處我定義了一個tab其中使用了href屬性，就代表改此處是要從外部加載一個html片斷來顯示tab的內容。下面是我定義的tabs_href_test.html的內容

 
      1 
      <script type="text/javascript" src="test.js"></script> 
     
      2 
      <script>alert("我是外部加載的html片斷");</script> 
     
      3 
      <div><p>我是外部加載的html片斷</p></div>

test.js的內容：

 
      1 
      alert("我是外部界面導入的js");

 
      01 
      <html> 
     
      02 
      <head> 
     
      03 
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
     
      04 
      <title>Tabs - jQuery EasyUI Demo</title> 
     
      05 
        <script type="text/javascript" src="test.js"></script> 
     
      06 
        <script>alert("我是外部加載的html片斷");</script> 
     
      07 
      </head> 
     
      08 
      <body> 
     
      09 
        <div><p>我是外部加載的html片斷</p></div> 
     
      10 
      </body> 
     
      11 
      </html>

     
      1 
      <script type="text/javascript" src="test.js"></script> 
     
      2 
      <link ref="css"/> 
     
      3 
      <style>還能夠寫點樣式</style> 
     
      4 
      <script>alert("我是外部加載的html片斷");</script> 
     
      5 
      <div><p>我是外部加載的html片斷</p></div>