博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
关于Easyui的窗口和tab页面不执行JS的原因说明
阅读量:4321 次
发布时间:2019-06-06

本文共 1589 字,大约阅读时间需要 5 分钟。

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

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

1 2 3   这是完整的html结构4   5 6 7   
内容
8 9

一般我们写html代码都应该遵循此此结构。而所谓的html片段就是上面完整结构中的内容部分。

内容

虽然我们也会建立一个文件如b.html来保存html片段,但是在这个b.html中我们只需要编写<body>里面的内容不需要在把html的标准结构写出来。

好了了解html片段的概念,就来说下我在使用个easyui的过程会大量出现的html片段。
其实在使用easyui中你没嵌入iframe的话,除了index界面会有完整的html结构,其他的所有界面都以html片段的形式存在。就那tab来说,首先在界面上定义一个tabs

1  2  3   tab测试界面 4  5  6   
7
8
Content 2
9
Content 3
10
11 12

看到上面片段的title=”Title1“处我定义了一个tab其中使用了href属性,就表明改此处是要从外部加载一个html片段来显示tab的内容。下面是我定义的tabs_href_test.html的内容

1 2 3 

我是外部加载的html片段

test.js的内容:

alert("我是外部界面导入的js");
在此肯定会有很多人告诉我,我是这样写的,但是我的js根本就不执行。其实不然,我看到过很多要我解决类是问题的人,发给我看的代码。假如tabs_href_test.html是他们引入的外部界面,都会是如下这样的一个完整的结构

1  2  3   
4 Tabs - jQuery EasyUI Demo 5 6 7 8 9

我是外部加载的html片段

10 11

他们都会问他们的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 2 
3 4 5

我是外部加载的html片段

 

转载于:https://www.cnblogs.com/haycco/archive/2012/05/16/3031429.html

你可能感兴趣的文章
selenium.Phantomjs设置浏览器请求头
查看>>
分布式数据库如何选择,几种分布式数据库优缺点一览
查看>>
BZOJ 4443: 小凸玩矩阵【二分图】
查看>>
苹果 OS X制作u盘启动盘
查看>>
Jquery便利对象
查看>>
MVC: Connection String
查看>>
idea常用设置汇总
查看>>
Node.SelectNodes
查看>>
Lambda表达式语法进一步巩固
查看>>
Vue基础安装(精华)
查看>>
Git 提交修改内容和查看被修改的内容
查看>>
PAT - 1008. 数组元素循环右移问题 (20)
查看>>
请求出现 Nginx 413 Request Entity Too Large错误的解决方法
查看>>
配置php_memcache访问网站的步骤
查看>>
hibernate的id生成策略
查看>>
树莓派3B+学习笔记:5、安装vim
查看>>
[Spfa][bfs] Jzoj P5781 秘密通道
查看>>
企业帐号进行IPA的打包、分发、下载安装的详细流程(转载)
查看>>
《项目架构那点儿事》——快速构建Junit用例
查看>>
{"errmsg":"invalid weapp pagepath hint: [IunP8a07243949]","errcode":40165}微信的坑
查看>>