关于easyui的窗口和tab页面不执行js说明
来源:互联网 发布:给游戏做美工需要什么 编辑:程序博客网 时间:2024/06/01 09:25
文章来源-----http://www.jeasyuicn.com/post-49.html
一直以来群里里面很多人反应,在用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
>
好了了解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
>
他们都会问他们的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
>
- GodSon - 关于easyui的窗口和tab页面不执行js说明
- 关于easyui的窗口和tab页面不执行js说明
- 关于在easyui中添加tab的时候不能执行href页面中的js的说明
- 关于easyui通过href引入外部jsp页面js不执行的说明
- EasyUI的window加载的页面不执行js问题说明
- EasyUI 关于 panel,window,dialog 通过href加载页面,页面中引用的js不执行的解决方案
- EasyUi的tab组件href属性链接的页面JS代码无法执行
- 关于easyui整合polymer中tab切换页面不匹配的解决(更新中)
- EasyUI刷新tab的页面
- Easyui添加tab时以href形式载入页面 未执行js脚本问题解决
- jquery easyui Tab 引入页面的问题
- jquery easyui Tab 引入页面的问题
- jquery-easyui-tab引入页面的问题
- jsp页面不执行当前页面的js方法
- 关于jQuery EasyUI 中刷新Tab选项卡 后一个页面变形的问题的解决方法
- 关于Angular.js和ionic配合使用ios和安卓的tab等不统一的解决方案
- 关于easyUI登入界面不跳出当前tab
- 用js实现页面布局的滑动门和TAB
- 《C#高级教程》学习笔记13
- ZOJ 3640 Help Me Escape 概率DP 记忆化DFS
- 第十六周 项目二 用指针玩转字符串(统计字符长度)
- 像素、dpi、dip概念
- magento 后台取产品自定义的select(下拉菜单)字段
- 关于easyui的窗口和tab页面不执行js说明
- WebService学习笔记
- 【剑指Offer面试编程题】题目1369:字符串的排列--九度OJ
- Java递归打印文件(夹)路径【Java学习笔记】
- java IO 字节流的使用
- 怎样搜索百度网盘的资料
- JPA实体关联关系映射之概述
- 科研日记-2014.12.22
- spark hive 问题,纠结