原地址：http://www.jeasyuicn.com/post-49.html
一直以來群里里面很多人反應，在用tab加載界面的時候，界面里面的js不會執行。今天GodSon在此說明一下原因。
不管是window，dailog還是tab其實質最終都是繼承了panel。panel有兩種方式展示內容。第一是直接硬編碼寫到出來。第二是通過href屬性，加載外部html片段。在這里就就設計到了一個html片段的概念。這個概念在easyui的整體架構中，是一個很重要的概念，因為很多人沒弄明白，所以從中引發出了很多問題。我舉個例子來說明html片段。
大家都知道html的標准結構是:
3 |
<title>這是完整的html結構</title> |
一般我們寫html代碼都應該遵循此此結構。而所謂的html片段就是上面完整結構中的內容部分。
雖然我們也會建立一個文件如b.html來保存html片段，但是在這個b.html中我們只需要編寫<body>里面的內容不需要在把html的標准結構寫出來。
好了了解html片段的概念，就來說下我在使用個easyui的過程會大量出現的html片段。
其實在使用easyui中你沒嵌入iframe的話，除了index界面會有完整的html結構，其他的所有界面都以html片段的形式存在。就那tab來說，首先在界面上定義一個tabs
03 |
<title>tab測試界面</title> |
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> |
看到上面片段的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的內容：
在此肯定會有很多人告訴我，我是這樣寫的，但是我的js根本就不執行。其實不然，我看到過很多要我解決類是問題的人，發給我看的代碼。假如tabs_href_test.html是他們引入的外部界面，都會是如下這樣的一個完整的結構
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> |
09 |
<div><p>我是外部加載的html片段</p></div> |
他們都會問他們的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在此說明一下原因。
不管是window，dailog還是tab其實質最終都是繼承了panel。panel有兩種方式展示內容。第一是直接硬編碼寫到出來。第二是通過href屬性，加載外部html片段。在這里就就設計到了一個html片段的概念。這個概念在easyui的整體架構中，是一個很重要的概念，因為很多人沒弄明白，所以從中引發出了很多問題。我舉個例子來說明html片段。
大家都知道html的標准結構是:
3 |
<title>這是完整的html結構</title> |
一般我們寫html代碼都應該遵循此此結構。而所謂的html片段就是上面完整結構中的內容部分。
雖然我們也會建立一個文件如b.html來保存html片段，但是在這個b.html中我們只需要編寫<body>里面的內容不需要在把html的標准結構寫出來。
好了了解html片段的概念，就來說下我在使用個easyui的過程會大量出現的html片段。
其實在使用easyui中你沒嵌入iframe的話，除了index界面會有完整的html結構，其他的所有界面都以html片段的形式存在。就那tab來說，首先在界面上定義一個tabs
03 |
<title>tab測試界面</title> |
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> |
看到上面片段的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的內容：
在此肯定會有很多人告訴我，我是這樣寫的，但是我的js根本就不執行。其實不然，我看到過很多要我解決類是問題的人，發給我看的代碼。假如tabs_href_test.html是他們引入的外部界面，都會是如下這樣的一個完整的結構
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> |
09 |
<div><p>我是外部加載的html片段</p></div> |
他們都會問他們的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>三個標簽：
1 |
<script type="text/javascript" src="test.js"></script> |
4 |
<script>alert("我是外部加載的html片段");</script> |
5 |
<div><p>我是外部加載的html片段</p></div> |
