一直以来群里里面很多人反应，在用tab加载界面的时候，界面里面的js不会执行。今天GodSon在此说明一下原因。

不管是window，dailog还是tab其实质最终都是继承了panel。panel有两种方式展示内容。第一是直接硬编码写到出来。第二是通 过href属性，加载外部html片段。在这里就就设计到了一个html片段的概念。这个概念在easyui的整体架构中，是一个很重要的概念，因为很多 人没弄明白，所以从中引发出了很多问题。我举个例子来说明html片段。

大家都知道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");

在此肯定会有很多人告诉我，我是这样写的，但是我的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>三个标签：

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>

关于easyui的窗口和tab页面不执行js说明的更多相关文章

  1. 【转】关于easyui的窗口和tab页面不执行js说明

    原地址:http://www.jeasyuicn.com/post-49.html 一直以来群里里面很多人反应,在用tab加载界面的时候,界面里面的js不会执行.今天GodSon在此说明一下原因. 不 ...

  2. selenium常用操作，查找元素，操作Cookie，获取截图，获取窗口信息，切换，执行js代码

    目录: 1. 常用操作 2. 查找元素 3. 操作Cookie 4. 获取截图 5. 获取窗口信息 6. 切换 7. 执行JS代码 简介 selenium.webdriver.remote.webdr ...

  3. EasyUI的window加载的页面不执行js问题说明

    http://364434006.iteye.com/blog/1671907 ———————————————————————————————————————————————————————————— ...

  4. 解决pjax加载页面不执行js插件的问题

    个人博客 地址:http://www.wenhaofan.com/article/20180913220425 介绍 在使用jquery.pjax的时候发现加载页面时不会执行其中的layui以及jqu ...

  5. 页面自动执行js的3种方法

    1.最简单的调用方式,直接写到html的body标签里面:   <html> <body onload="load();"> </body> & ...

  6. Easyui实用视频教程系列---Tree点击打开tab页面

    Easyui实用视频教程系列---Tree点击打开tab页面 首先 我们 要搭建环境 easyui 环境 然后 把tree 给创建出来 在某个位置 粘贴 下面代码 <ul id="tt ...

  7. 子窗口访问父页面iframe中的iframe，top打开的子窗口访问父页面中的iframe中的iframe

    子窗口访问父页面iframe中的iframe 子窗口访问最顶层页面中的iframe中的iframe top打开的子窗口访问父页面中的iframe中的iframe top打开的子窗口访问最顶层页面中的i ...

  8. easyui实现树形菜单Tab功能、layout布局

    一:常见三种前端ui框架 在初学者入门的状态下,我们常见的前端框架有三种且都有自己的官方网站: 1.easyui:官方网站(http://www.jeasyui.net/) 基于jquery的用户页面 ...

  9. jQuery EasyUI window窗口实例

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>j ...

随机推荐

  1. iOS6：在你的App内使用Passbook

    前言 这是一篇翻译,感谢Jonathan Tang. 原文地址:iOS 6 Tutorial: Integrating Passbook into Your Applications 另外,看到另一篇 ...

  2. oracle和sql server的区别（1）

    A.instance和database 1.从oracle的角度来说,每个instance对应一个database.有时候多个instance对应一个database(比如rac环境).有自己的Sys ...

  3. Leetcode: Insert Delete GetRandom O(1)

    Design a data structure that supports all following operations in average O(1) time. insert(val): In ...

  4. 网易免费邮件开启smtp教程

    网易免费邮件开启smtp教程     作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 我们在部署zabbix邮件报警中可能会用到163.com.那么我们如何去开启smtp服务呢? 1 ...

  5. srcolltop 的用法

    document.body.scrollTop用法 网页可见区域宽: document.body.clientWidth;网页可见区域高: document.body.clientHeight;网页可 ...

  6. Python学习总结13：os模块

    os模块包含普遍的操作系统功能,与具体的平台无关.常用于处理文件和目录这些我们日常手动需要做的操作. 1. os模块函数汇总 1) os.name():判断现在正在实用的平台,Windows 返回 ‘ ...

  7. CCF真题之画图

    201409-2 问题描述 在一个定义了直角坐标系的纸上,画一个(x1,y1)到(x2,y2)的矩形指将横坐标范围从x1到x2,纵坐标范围从y1到y2之间的区域涂上颜色. 下图给出了一个画了两个矩形的 ...

  8. ansible自动化运维工具的安装与使用

    运行环境 centOS6.6 ansible ansible的功能还是比较多的,博主只用它在集群上进行批量部署软件和维护的功能,其他不多做研究,有需要的话这篇文章会慢慢补充. ansible特点 轻量 ...

  9. 三层架构与MVC的区别

    我们平时总是将混为一谈,殊不知它俩并不是一个概念.下面我来为大家揭晓我所知道的一些真相. 首先,它俩根本不是一个概念. 三层架构是一个分层式的软件体系架构设计,它可适用于任何一个项目. MVC是一个设 ...

  10. startActivityForResult 页面跳转回调

    import java.io.Serializable; import java.util.ArrayList; import java.util.HashMap; import java.util. ...