EasyUI-panel 內嵌頁面上的js無法被執行
一直以來群裡裡面很多人反應，在用tab載入介面的時候，介面裡面的js不會執行。今天GodSon在此說明一下原因。
不管是window，dailog還是tab其實質最終都是繼承了panel。panel有兩種方式展示內容。第一是直接硬編碼寫到出來。第二是通 過href屬性，載入外部html片段。在這裡就就設計到了一個html片段的概念。這個概念在easyui的整體架構中，是一個很重要的概念，因為很多 人沒弄明白，所以從中引發出了很多問題。我舉個例子來說明html片段。
大家都知道html的標準結構是:
<html>
<head>
<title>這是完整的html結構</title>
<script></script>
</head>
<body>
<div>內容</div>
</body>
</html>
一般我們寫html程式碼都應該遵循此此結構。而所謂的html片段就是上面完整結構中的內容部分。
<div>內容</div>
雖然我們也會建立一個檔案如b.html來儲存html片段，但是在這個b.html中我們只需要編寫<body>裡面的內容不需要在把html的標準結構寫出來。
好了瞭解html片段的概念，就來說下我在使用個easyui的過程會大量出現的html片段。
其實在使用easyui中你沒嵌入iframe的話，除了index介面會有完整的html結構，其他的所有介面都以html片段的形式存在。就那tab來說，首先在介面上定義一個tabs
<html>
<head>
<title>tab測試介面</title>
</head>
<body>
<div class="easyui-tabs" fit="true" plain="true" style="height:100px;width:300px;">
<div title="Title1" style="padding:10px;" href="tabs_href_test.html"></div>
<div title="Title2" style="padding:10px;">Content 2</div>
<div title="Title3" style="padding:10px;">Content 3</div>
</div>
</body>
</html>
看到上面片段的title=”Title1“處我定義了一個tab其中使用了href屬性，就表明改此處是要從外部載入一個html片段來顯示tab的內容。下面是我定義的tabs_href_test.html的內容
<script type="text/javascript" src="test.js"></script>
<script>alert("我是外部載入的html片段");</script>
<div><p>我是外部載入的html片段</p></div>
test.js的內容：
alert("我是外部介面匯入的js");
在此肯定會有很多人告訴我，我是這樣寫的，但是我的js根本就不執行。其實不然，我看到過很多要我解決類是問題的人，發給我看的程式碼。假如tabs_href_test.html是他們引入的外部介面，都會是如下這樣的一個完整的結構
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Tabs - jQuery EasyUI Demo</title>
<script type="text/javascript" src="test.js"></script>
<script>alert("我是外部載入的html片段");</script>
</head>
<body>
<div><p>我是外部載入的html片段</p></div>
</body>
</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>三個標籤：
<script type="text/javascript" src="test.js"></script>
<link ref="css"/>
<style>還可以寫點樣式</style>
<script>alert("我是外部載入的html片段");</script>
<div><p>我是外部載入的html片段</p></div>