一直以来群里里面很多人反应,在用tab加载界面的时候,界面里面的js不会执行。今天GodSon在此说明一下原因。
不管是window,dailog还是tab其实质最终都是继承了panel。panel有两种方式展示内容。第一是直接硬编码写到出来。第二是通 过href属性,加载外部html片段。在这里就就设计到了一个html片段的概念。这个概念在easyui的整体架构中,是一个很重要的概念,因为很多 人没弄明白,所以从中引发出了很多问题。我举个例子来说明html片段。
大家都知道html的标准结构是:
3 |
< title >这是完整的html结构</ title > |
一般我们写html代码都应该遵循此此结构。而所谓的html片段就是上面完整结构中的内容部分。
虽然我们也会建立一个文件如b.html来保存html片段,但是在这个b.html中我们只需要编写<body>里面的内容不需要在把html的标准结构写出来。
好了了解html片段的概念,就来说下我在使用个easyui的过程会大量出现的html片段。
其实在使用easyui中你没嵌入iframe的话,除了index界面会有完整的html结构,其他的所有界面都以html片段的形式存在。就那tab来说,首先在界面上定义一个tabs
03 |
< title >tab测试界面</ title > |
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 > |
看到上面片段的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的内容:
在此肯定会有很多人告诉我,我是这样写的,但是我的js根本就不执行。其实不然,我看到过很多要我解决类是问题的人,发给我看的代码。假如tabs_href_test.html是他们引入的外部界面,都会是如下这样的一个完整的结构
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 > |
09 |
< div >< p >我是外部加载的html片段</ p ></ div > |
他 们都会问他们的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 > |
4 |
< script >alert("我是外部加载的html片段");</ script > |
5 |
< div >< p >我是外部加载的html片段</ p ></ div > |
- 【转】关于easyui的窗口和tab页面不执行js说明
原地址:http://www.jeasyuicn.com/post-49.html 一直以来群里里面很多人反应,在用tab加载界面的时候,界面里面的js不会执行.今天GodSon在此说明一下原因. 不 ...
- selenium常用操作,查找元素,操作Cookie,获取截图,获取窗口信息,切换,执行js代码
目录: 1. 常用操作 2. 查找元素 3. 操作Cookie 4. 获取截图 5. 获取窗口信息 6. 切换 7. 执行JS代码 简介 selenium.webdriver.remote.webdr ...
- EasyUI的window加载的页面不执行js问题说明
http://364434006.iteye.com/blog/1671907 ———————————————————————————————————————————————————————————— ...
- 解决pjax加载页面不执行js插件的问题
个人博客 地址:http://www.wenhaofan.com/article/20180913220425 介绍 在使用jquery.pjax的时候发现加载页面时不会执行其中的layui以及jqu ...
- 页面自动执行js的3种方法
1.最简单的调用方式,直接写到html的body标签里面: <html> <body onload="load();"> </body> & ...
- Easyui实用视频教程系列---Tree点击打开tab页面
Easyui实用视频教程系列---Tree点击打开tab页面 首先 我们 要搭建环境 easyui 环境 然后 把tree 给创建出来 在某个位置 粘贴 下面代码 <ul id="tt ...
- 子窗口访问父页面iframe中的iframe,top打开的子窗口访问父页面中的iframe中的iframe
子窗口访问父页面iframe中的iframe 子窗口访问最顶层页面中的iframe中的iframe top打开的子窗口访问父页面中的iframe中的iframe top打开的子窗口访问最顶层页面中的i ...
- easyui实现树形菜单Tab功能、layout布局
一:常见三种前端ui框架 在初学者入门的状态下,我们常见的前端框架有三种且都有自己的官方网站: 1.easyui:官方网站(http://www.jeasyui.net/) 基于jquery的用户页面 ...
- jQuery EasyUI window窗口实例
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>j ...
随机推荐
- 抽取AWR数据
使用$ORACLE_HOME/rdbms/admin/awrextr.sql $ sqlplus '/as sysdba' SQL*Plus: Release Production on Fri No ...
- RMQ (Range Minimal Query) 问题 ,稀疏表 ST
RMQ ( 范围最小值查询 ) 问题是一种动态查询问题,它不需要修改元素,但要及时回答出数组 A 在区间 [l, r] 中最小的元素值. RMQ(Range Minimum/Maximum Query ...
- Dive into python 实例学python (2) —— 自省,apihelper
apihelper.py def info(object, spacing=10, collapse=1): """Print methods and doc strin ...
- 学习OpenCV——配置CUDA环境
大家都把GPU&CUDA说的很NB狠NB,于是,下一步想通过GPU加速程序运行.这一个星期,都在配置OpenCV的CUDA环境,今天终于以失败告终,原因是实验室的机器显卡不支持CUDA...伤 ...
- 一个想了好几天的问题——关于8086cpu自己编写9号中断不能单步的问题
在<汇编语言>第十五章中我们可能遇到这样的问题:程序运行正确,但是debug单步调试,却无法运行,修改int 9h中断例程入口地址的指令,虚拟模式下,debug提示指令无效, ...
- 0428—Scrum团队成立及《构建之法》第六、七章读后感
5.Scrum团队成立 5.1 团队名称:喳喳 团队目标:突破渣渣 团队口号:吱吱喳喳 团队照: 5.2 角色分配 产品负责人: 112冯婉莹 Scrum Master:109张鑫相 PM项目经理:1 ...
- c++之路进阶——codevs1286(郁闷的出纳员)
1286 郁闷的出纳员 2004年NOI全国竞赛 时间限制: 1 s 空间限制: 128000 KB 题目等级 : 大师 Master 题目描述 Description OIER公司 ...
- Codeforces Beta Round #93 (Div. 1 Only) D. Fibonacci Sums
先考虑一个斐波那契数能分成其他斐波那契数的方案,假如f[i]表示第i个斐波那契数,那么只要对他进行拆分,f[i-1]这个数字必定会存在.知道这一点就可以进行递推了.先将数字分成最少项的斐波那契数之和, ...
- android 添加背景音乐
MediaPlayer mediaPlayer=MediaPlayer.create(MainActivity.this,R.raw.qiji); mediaPlayer.start();
- PHP XDEBUG
PHP调试时,不得不提XDEBUG这个调试利器.学习PHP以来,几乎所有的问题我都利用它来解决. 首先关于如何安装,不在赘述,请自行google之.(需要特别注意的是:PHP5.2 和5.3 ,关于加 ...