声明： http://www.jeasyuicn.com/post-49.html

本文引用自GodSon的杰作 http://www.jeasyuicn.com/post-49.html，除修正了个别错误字词外未作其他改动，请诸其他引用本文的朋友尽量引用这个原文的地址以示对原著者的尊重。

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

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

大家都知道html的标准结构是:

<html>

<head>

    <title>这是完整的html结构</title>

    <script></script>

</head>

<body>

<div>内容</div>

</body>

</html>

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

<div>内容</div>

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

好了了解html片段的概念，就来说下我在使用个easyui的过程会大量出现的html片段。

其实在使用easyui中你没嵌入iframe的话，除了index界面会有完整的html结构，其他的所有界面都以html片段的形式存在。就那tab来说，首先在界面上定义一个tabs

<html>

<head>

<title>tab测试界面</title>

</head>

<body>

<div class="easyui-tabs" fit="true" plain="true" style="height:100px;width:300px;">

    <div title="Title1" style="padding:10px;" href="tabs_href_test.html"></div>

    <div title="Title2" style="padding:10px;">Content 2</div>

    <div title="Title3" style="padding:10px;">Content 3</div>

</div>

</body>

</html>
 

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

<script type="text/javascript" src="test.js"></script>

<script>alert("我是外部加载的html片段");</script>

<div><p>我是外部加载的html片段</p></div>
 

test.js的内容：

alert("我是外部界面导入的js");

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

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Tabs - jQuery EasyUI Demo</title>

  <script type="text/javascript" src="test.js"></script>

  <script>alert("我是外部加载的html片段");</script>

</head>

<body>

  <div><p>我是外部加载的html片段</p></div>

</body>

</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>三个标签：

<script type="text/javascript" src="test.js"></script>

<link ref="css"/>

<style>还可以写点样式</style>

<script>alert("我是外部加载的html片段");</script>

<div><p>我是外部加载的html片段</p></div>
 

EasyUI-panel 内嵌页面上的js无法被执行的更多相关文章

  1. 用vue做app内嵌页遇到的坑

    公司要求用vue做一个微信端的网站,其中还包含一些app的内嵌页.开始的时候没想那么多,就直接用vue-cli搭了一个单页的vue项目,可随着项目越做越大,页面越来越多,问题就开始暴露出来了. 众所周 ...

  2. nginx设置反向代理后，页面上的js css文件无法加载

    问题现象: nginx配置反向代理后,网页可以正常访问,但是页面上的js css文件无法加载,页面样式乱了. (1)nginx配置如下: (2)域名访问:js css文件无法加载: (3)IP访问:j ...

  3. nginx反向代理转发后页面上的js css文件无法加载【原创】

    故障现象:nginx做代理转发后,发现页面上的js css文件无法加载,页面样式乱了. 原因:没有配置静态资源 解决js css文件无法加载无法访问的问题 解决办法: 修改配置文件nginx.conf ...

  4. 使用Chrome开发者工具调试Android端内网页(微信，QQ，UC，App内嵌页等)

    使用Chrome开发者工具调试Android端内网页(微信,QQ,UC,App内嵌页等) 前言 移动端页面调试一直是好多朋友头疼的问题,iOS 由于其封闭的特性和整体较高的性能,整体适配相对好做,调试 ...

  5. nginx设置反向代理后端jenklins，页面上的js css文件无法加载

    转载 2017年06月14日 22:36:59 8485 问题现象: nginx配置反向代理后,网页可以正常访问,但是页面上的js css文件无法加载,页面样式乱了. (1)nginx配置如下: (2 ...

  6. 使用Windows安装的最高版本IE内核加载内嵌页(转载)

    客户端程序内嵌Webbrowser控件时,默认情况都是使用IE7兼容模式打开网页的.但是IE7有很多新的特性不支持,导致无法正常显示出来,所以需要强制使用高版本的IE内核来加载.渲染. void Ch ...

  7. 内嵌页js与ios和安卓的交互

    ios: 一个iframe,改变url会发送一个请求,把url设置成就是bridge://xxxxx客户端就可以拦截请求,并在全局变量xxxxx中取出一个字符串.例如{event:'click'},可 ...

  8. 微信内嵌H5网页 解决js倒计时失效

    项目要求:将H5商城页面嵌套到公司微信公众号里 项目本身的开发跟移动端网页并无太多差异,只是这昨天遇到一个问题,说是棘手,到也简单. 用户下单后,在选择支付方式页面,有个倒计时的逻辑(从下单时开始计算 ...

  9. web 页面上纯js实现按钮倒计数功能(实时计时器也可以)

    需求构思:本功能想实现的是,一个按钮在页面载入就显示提醒续费,,,倒数60秒后,完成提醒功能,可以按另外一个页面跳转到主页. 参考网上的大神,实现如下:Button2倒数,Button3跳转,在页面上 ...

随机推荐

  1. iOS,plist文件、pct文件,工程设置

    1.使用pch文件 2.在info.plist中配置URL Schemes 3.plist配置拍照界面,复制,粘贴等菜单的显示语言 显示中文 4.使用非ARC库/ARC库 5.链接选项-Objc &a ...

  2. 游戏制作之路：一个对我来说可实现的High-end的Mac/iOS游戏制作大概计划

    对于学习一些东西,我比较习惯任务驱动式的学习,也就是说,要事先订好一个目标,要做什么东西,达到什么效果,然后根据自己了解的知识作一个可以实现这个目标的计划. 现在要学的是游戏制作,而且是High-en ...

  3. PHP Apache服务配置

    第一步:在C:\Windows\System32\drivers\etc中找到hosts配置服务 127.0.0.1 localhost 127.0.0.1 www.psq.com 保存即可 第二步: ...

  4. biztalk重新发布

    前提:在vs2013中,项目属性:重新部署设置为true,重新启动主机实例:设置为true,或者在最后重新部署完以后手动重启主机实例 下面是具体的步骤: 1. 项目修改完重新生成.. 2. 转到biz ...

  5. Coursera台大机器学习课程笔记3 – 机器学习的可能性

    提纲: 机器学习为什么可能? 引入计算橙球概率问题 通过用Hoeffding's inequality解决上面的问题,并得出PAC的概念,证明采样数据学习到的h的错误率可以和全局一致是PAC的 将得到 ...

  6. Qt之自定义信号和槽函数

    自定义信号和槽函数: 1.类的声明和实现分别放在.h和.cpp文件中: 2.类声明包含Q_OBJECT宏: 3.信号只要声明不要设计其的实现函数 4.发射信号用emit关键字 5.自定义槽的实现与普通 ...

  7. 处理mysql上百万条数据的优化

    php 处理上百万条的数据库如何提高处理查询速度 1.对查询进行优化,应尽量避免全表扫描,首先应考虑在 where 及 order by 涉及的列上建立索引. 2.应尽量避免在 where 子句中对字 ...

  8. eclipse快捷方式

    虽说右键可以直接发送快捷方式到桌面,但是点击桌面图标确提示错误,偶然发现右键选个什么,配置下启动文件就ok了(就是链接到安装目录里面那个可以启动的exe),后来怎么复现不了,伤感了,不过是可以用了,还 ...

  9. Linux下的PostgreSQL简单安装手册

    1. 安装环境     linux版本: CentOS release 6.2 (Final)     pg版本    : postgresql-9.5.0   2. pg数据库下载地址 --http ...

  10. AS3语言注意事项汇总

    1. 在IE中,主DisplayObject加入stage后,可能其大小还是0,这时可以通过监听resize信息,在主DisplayObject获得正确的大小后,运行主要程序.需要注意的是在这个过程中 ...