【转】关于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>