关于easyui的窗口和tab页面不执行js说明

一直以来群里里面很多人反应,在用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>三个标签:

view sourceprint?

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>
时间: 2024-10-11 22:24:20

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

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

原地址:http://www.jeasyuicn.com/post-49.html 一直以来群里里面很多人反应,在用tab加载界面的时候,界面里面的js不会执行.今天GodSon在此说明一下原因. 不管是window,dailog还是tab其实质最终都是继承了panel.panel有两种方式展示内容.第一是直接硬编码写到出来.第二是通过href属性,加载外部html片段.在这里就就设计到了一个html片段的概念.这个概念在easyui的整体架构中,是一个很重要的概念,因为很多人没弄明白,所以从中

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

http://364434006.iteye.com/blog/1671907 —————————————————————————————————————————————————————————————————————— 解决方案:将被加载页面中的body标签删掉. 说明:window.dialog.tab都是panel,加载内容的方式都有硬编码和通过url来加载外部html片段,这里html片段就是body标签里面的代码. 详细参见: http://easyui.btboys.com/post

C#开发中碰到的问题------easyUI 框架下dialog加载HTML页面不执行js问题

问题描述: easyUI 框架下,使用easyUI dialog加载HTML页面,HTML页面写在头部的js不会执行 解决办法: 将js写在body里 问题原因: 转[https://www.cnblogs.com/summer_adai/p/3548252.html] 原文地址:https://www.cnblogs.com/LiCoco/p/9117103.html

EasyUI创建异步树形菜单和动态添加tab页面

创建异步树形菜单 添加树形菜单的ul标签 <ul class="easyui-tree" id="treeMenu"> </ul> 写js代码,对菜单的ul标签元素使用tree函数 $('#treeMenu').tree({ url:'tree_data.json' //url的值是异步获取数据的页面地址 }); 写用来异步获取数据的页面(tree_data.json页面).返回的需是Json值(此处用数组代替从数据库获取的数据,以省略连接数

JavaScript提高:003:easy UI实现tab页面自适应问题

前面说到使用easyUI在asp.net中实现了tab控件效果.http://blog.csdn.net/yysyangyangyangshan/article/details/38307477不过有一个问题,div的宽度太宽了,而且不随页面变化而改变.网上搜索了下,发现很多人也碰到过,而且也有解决的办法.下面看看吧.实现tab的部分代码如下:引用的easyui文件参考上文. <div id="tabTop" class="easyui-tabs"> &

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

一:常见三种前端ui框架 在初学者入门的状态下,我们常见的前端框架有三种且都有自己的官方网站: 1.easyui:官方网站(http://www.jeasyui.net/) 基于jquery的用户页面插件集合,为一些交互的js提供相应的功能,开发者也不需要写特别复杂的javascript方法,可以用html的标签来解决,支持html5可以说算是能满足你的所有需求,节约时间还能扩展需求,虽然简单但是功能强大. 2.Bootstrap:官方网站(http://www.bootcss.com/) Bo

jQuery EasyUI window窗口实例

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>jQuery EasyUI window窗口</title> <link rel="stylesheet" id="easyuiTheme" type="text/css" href="/themes/default/eas

子窗口调用父页面js实例

父页面代码: <%@ page contentType="text/html; charset=GBK"%> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=GBK" /> <title>new_page_title</title> <script type="

easyui只打开一个tab

下面是JS代码: var curr = null; //curr为当前tab的标题,在else中赋值 function addtab(href, tabtitle) { if (curr) { $('#contab').tabs('update', { tab : curr, options : { title : tabtitle, href : href, selected : true } }); $('#contab').tabs('select', tabtitle); } else