EasyUI-panel 内嵌页面上的js无法被执行

声明: 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>
时间: 2024-11-10 12:59:25

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

用vue做app内嵌页遇到的坑

公司要求用vue做一个微信端的网站,其中还包含一些app的内嵌页.开始的时候没想那么多,就直接用vue-cli搭了一个单页的vue项目,可随着项目越做越大,页面越来越多,问题就开始暴露出来了. 众所周知,单页面程序优点是在页面初始化时加载相应的HTML.JavaScript 和 CSS,一旦页面加载完成了,就不用再做其他的加载和跳转了,极大的提升了页面的流畅性,提供良好的用户体验.那么问题来了,把所有东西都放在初始化的时候做,就造成了页面首次加载需要更长的等待时间.而对于那些作为app内嵌的页面

panel内嵌程序窗体

function RunAppInPanel(const AppFileName: string; ParentHandle: HWND; var WinHandle: HWND): Boolean; var si: STARTUPINFO; pi: TProcessInformation; begin Result := False; // 启动进程 FillChar(si, SizeOf(si), 0); si.cb := SizeOf(si); si.wShowWindow := SW_S

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

问题现象: nginx配置反向代理后,网页可以正常访问,但是页面上的js css文件无法加载,页面样式乱了. (1)nginx配置如下: (2)域名访问:js css文件无法加载: (3)IP访问:js css文件可以正常加载: 解决方法: nginx配置文件中,增加如下配置: location ~ .*\.(js|css)$ { proxy_pass http://127.0.0.1:8866; } 原因分析: 反向代理的路径下找不到文件,需要单独指定js css文件的访问路径.

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

客户端程序内嵌Webbrowser控件时,默认情况都是使用IE7兼容模式打开网页的.但是IE7有很多新的特性不支持,导致无法正常显示出来,所以需要强制使用高版本的IE内核来加载.渲染. 1 void ChangeRegedit(const wchar_t* pExeName) 2 { 3 if ( NULL == pExeName ) 4 return ; 5 TCHAR szVersion[64] = {0}; 6 DWORD dwSize = 64; 7 HKEY hKey; 8 // 先获

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

项目要求:将H5商城页面嵌套到公司微信公众号里 项目本身的开发跟移动端网页并无太多差异,只是这昨天遇到一个问题,说是棘手,到也简单. 用户下单后,在选择支付方式页面,有个倒计时的逻辑(从下单时开始计算,24小时后未支付,会有ws自动取消这个订单),js代码如下: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 <script type="text/javascript"><br>  var 

去除iframe内嵌页讨厌的的滚动条

<body class="no-skin"  topmargin="0" leftmargin="0" style='OVERFLOW:SCROLL;OVERFLOW-X:HIDDEN;OVERFLOW-Y:HIDDEN'>

web端,qq互联以及微信登录接入流程(内嵌页面)总结

前言 实习过程中,我参与了web版相册管家的开发,负责登陆页面的前后端逻辑. 需要在登陆页接入QQ互联和微信扫码登陆,而且是用页面内嵌方式.回头来看其实两者都有文档指导,步骤清楚,并不复杂.但是第一次接触难免踩坑,在此梳理如下,方便今后开发参考. QQ互联 开发文档 https://wiki.connect.qq.com/%E7%BD%91%E7%AB%99%E5%BA%94%E7%94%A8%E6%8E%A5%E5%85%A5%E6%B5%81%E7%A8%8B 应用申请 申请appid和ap

原生js实现tab选项卡里内嵌图片滚动特效代码

<!DOCTYPE HTML><html lang="en-US"><head><meta charset="UTF-8"><title>原生js实现tab选项卡里内嵌图片滚动特效代码</title><meta name="keywords" content="原生js实现tab选项卡里内嵌图片滚动特效代码" /><meta name=&

JS获得ASP.NET(C#)页面上GridView选中行的信息

做web开发还是新手的我,之前为了得到Gridview中的值,是将其通过服务端控件先将Gridview中的数据保存到服务端,然后绑定当一个服务端的隐藏域,之后通过js读取隐藏域中的值,现在感觉这种方法很笨:虽然得到数据是很容易的仅仅是遍历一下Gridview,但是考虑的性能,我还是想用js来读取.现在可以得到我想要的数据了,为了方便以后和我一样的新手,现在简单记下,希望能够抛砖引玉,有待找到更好的解决办法.如果您有更好的想法请联系qq:643166601,我会及时记录更新. 1.准备数据库,我的