jquery+easyui+window href加载页面,子页面JS失效问题
[问题点数：40分]
本版专家分：0
结帖率 33.33%
CSDN今日推荐
本版专家分：0
本版专家分：499
本版专家分：5421
本版专家分：0
本版专家分：1258
本版专家分：0
匿名用户不能发表回复！
其他相关推荐jQuery Easyui 的tabs插件有两种方式加载某个tab(标签页)上的内容：&href远程请求&和&content本地内容&，本文就两种方式的优缺点进行简单分析和思考。
两者特点：
href方式加载数据的特点：
被加载的页面只有body元素内部的内容才会被加载，也就是jQuery的ajax请求的只是html片段。
加载远程url时有遮罩效果，也就是&等待中&&&效果，用户体验较好。
当加载的页面布局较为复杂，或者有较多的js脚本需要运行的时候，编码往往就需要谨慎了，容易出问题，后面会详细谈。
content方式加载数据的特点：
比较灵活，你可以在脚本里面拼写html代码，然后赋值给tab的content属性，不过这种写法会使得代码易读性变差。
可以把iframe赋给content，把一个iframe嵌入也就没有什么不能完成的了。
使用iframe会造成客户端js重复加载，浪费资源，比如说你主页面要引用easyui的库，你的iframe也要引用，浪费就产生了。
简单总结：
根据上面的分析，使用content的方式较为简洁，而且可以引入iframe来搞定一切，缺点也很明显，系统较为复杂的话，将带来极大地资源浪费，只适合较为简单的页面系统；
而href方式则对编码能力要求的稍微高一些，因为html的片段，稍微不注意就会处理不好，不过熟练的话，个人觉得href方式是不二之选。
href常见问题：
1.href只加载目标URL的html片段
这个特性是由jQuery封装的ajax请求处理机制所决定的，所以目标URL页面里不需要有html,head,body等标签，即使有这些元素，也会被忽略，所以放在head标签里面的任何脚本也不会被引入或者执行。
2.短暂的页面混乱：
href链接的页面比较复杂的时候，easyui对其渲染往往需要一个较长的过程，这时候，加载进来的html片段毫无布局可以，过一会自动会好，这时候easyui已经完成对它的渲染。如何避免这个混乱的过程呢，还得靠easyui的一个基础插件&&解析器(Parser)。
Parser有个onComplete事件，这个事件就是指easyui对页面完成渲染时触发，这样思路就很清晰了：用一个div遮罩住让被加载进来的html片段，在onComplete事件中，让这个div淡出，这时候渲染好的html片段就能美人出浴了，同时还整了个等待中的效果，一举两得。这样要做两件事：
第一是在要加载的html片段中放一个遮罩用的div：
&div&id="loading"&style="position: z-index: 1000; top: 0 left: 0 width: 100%; height: 100%; background: #DDDDDB; text-align: padding-top: 20%;"&&/div&
第二是在被加载的html片段尾部处理相关事件：
function&show(){
&&&&$("#loading").fadeOut("normal",&function(){
&&&&&&&&$(this).remove();
var&delayT
$.parser.onComplete =&function(){
&&&&if(delayTime)&
&&&&&&&&clearTimeout(delayTime);
&&&&delayTime = setTimeout(show,500);
需要注意的是，如果多个tab页面都使用了onComplete事件，当前定义的会覆盖之前定义的。其实每次easyui渲染完成均会调用onComplete事件，所以每打开一个包含easyui控件的tab页，onComplete事件就会被调用。
3.html片段的easyui组件相关脚本莫名地报错：
其实这个现象是跟第一个现象的原因一样的，easyui完成对html片段渲染需要一定的时间，页面越复杂，耗时越长，这时候难以避免html存在的脚本存在对easyui某些插件的调用，比如datagrid等，这个时候就会报错，解决方案同上，将这些脚本放到onComplete事件里处理，也就保证了渲染完成前，不会被执行。
4.放在window里面表单验证的提示信息会乱串：
这个现象应该是插件自身的bug，对位置的计算没有考虑到这些特殊的事情，解决方式可以投机取巧，在打开window后，让表单不符合验证的input获得焦点就可以了。
5.两次或者多次加载远程数据问题：
官方已经说明在1.2.5的版本中已经修正了这个Bug，但是还是有不少人反应会出现两次加载远程数据的现象，甚至在1.2.6版本中也会遇到，如果您确实遇到这种情况了，请按以下方式检查：
远程数据返回的数据中是否包含class=&easyui-tabs&或者class=&easyui-datagrid&这样的样式了， 如果有的话，easyui在获取html片段后会自动渲染，这时候已经对远程数据源做了一次请求；
您是否又用javascript去$(&#tabsId&).tabs({&});或者$(&#tabsId&).datagrid({&});去绑定事件或者设置属性，其实等于又一次渲染了对应控件，会再次请求远程数据。
为什么会这样，看看源码便知道了：
$.fn.tabs =&function(options, param){
&&&&if&(typeof&options ==&'string') {
&&&&&&&&return&$.fn.tabs.methods[options](this, param);
&&&&options = options || {};
&&&&return&this.each(function(){
&&&&&&&&var&state = $.data(this,&'tabs');
&&&&&&&&var&
&&&&&&&&if&(state) {
&&&&&&&&&&&&opts = $.extend(state.options, options);
&&&&&&&&&&&&state.options =
&&&&&&&&else&{
&&&&&&&&&&&&$.data(this,&'tabs', {
&&&&&&&&&&&&&&&&options: $.extend({}, $.fn.tabs.defaults, $.fn.tabs.parseOptions(this), options),
&&&&&&&&&&&&&&&&tabs: wrapTabs(this),
&&&&&&&&&&&&&&&&selectHis: []
&&&&&&&&&&&&});
&&&&&&&&buildButton(this);
&&&&&&&&setProperties(this);
&&&&&&&&setSize(this);
&&&&&&&&initSelectTab(this);
&&&&&&&&&&&&&&& 因此，直接传入对象的话，所有控件都会重新构造的，tabs多次加载的问题大多数就是这么发生的。
阅读(...) 评论()jquery easyui的tab的页面怎样重载问题_百度知道
jquery easyui的tab的页面怎样重载问题
比如某个tab初始是客户列表页面userlist.php,但已经按条件查询和翻页了，这是url应该是userlist.php?age=30&pageno=3由其他tab切换回这个tab时，如果用tab的$(selTab.panel('options'...
比如某个tab初始是客户列表页面 userlist.php,但已经按条件查询和翻页了，这是url应该是userlist.php?age=30&pageno=3由其他tab切换回这个tab时，如果用tab的$(selTab.panel('options').content).attr('src')获取url，然后update，就会重新回到userlist.php而没法没回到userlist.php?age=30&pageno=3，查询的条件没法保存了用Tab.panel('refresh');效果也一样，回到初始页面userlist.php这样有什么办法解决吗？有没有比如直接类似reload当前页面的方法？这样update肯定不行，是重新加载初始页面，这样问题应该很普遍啊。
答题抽奖
首次认真答题后
即可获得3次抽奖机会，100%中奖。
采纳数：284
获赞数：254
试试取panel的href属性，再Tab.panel('refresh', url);
为你推荐：
其他类似问题
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。书写jQuery EasyUI Tab 样例时,如果刷新前面的Tab 选项卡,某一个Tab 选项卡里面的页面布局变乱。如下面图片所示：
刚开始打开时页面布局正确：
此时我们在第二个选项卡里面,点击第一个页面的刷新按钮,一直刷新,然后切换回来再看看页面,如下图：
但是首页选项卡的页面是正常的。
为了便于解释说明,这里用第一个选项卡代表 “首页”,第二个选项卡代表”子菜单10”
出现这种情况的问题根本原因在于,你在第二个选项卡里面,点击其它第一个选项卡刷新按钮时,其实刷新的时第二个选项页面内容,当你鼠标离开你第一个选项卡刷新按钮时 ，此时才选中了第一个选项卡,而这时候第二个选项卡还没有渲染完毕,才导致出现这样的情况。验证过程,这是使用的是验证选项卡的title.
打开两个选项卡,一个”首页”,一个”子菜单10”选项卡,切换到”子菜单10”选项卡,然后点击”首页”选项卡的刷新按钮,弹出的结果如下的图,可见在鼠标点击的过程中,tab 里面选中的还是”子菜单10”选项卡,并不是我们看到的”首页”选项卡。
出现上图问题的错误代码如下:
function refeshCurrentTab() {
var tabPanel = $('#tabContainer');
var tab = tabPanel.tabs('getSelected');
var url = $(tab.panel('options').content).attr('src');
tabPanel.tabs('update', {
options: {
content: createFrame(url)
function createFrame(url) {
return '&iframe
src="' + url + '" frameborder="0" style="height:100%;width:100%;"&&/iframe&';
找到问题的根本所在,那么在上述方法中,只需要刷新时传入刷新按钮那个tab选项卡的标题,选中这个,然后再进行刷新操作。修改的代码如下:
function refeshCurrentTab(title) {
var tabPanel = $('#tabContainer');
var tab = tabPanel.tabs('getSelected');
var refeshTab = tabPanel.tabs("getTab", title);
if (tab != refeshTab) {
tabPanel.tabs("select", title);
tab = refeshT
var url = $(tab.panel('options').content).attr('src');
tabPanel.tabs('update', {
options: {
content: createFrame(url)
function createFrame(url) {
return '&iframe
src="' + url + '" frameborder="0" style="height:100%;width:100%;"&&/iframe&';
easyui选项卡混乱问题
页面1：table.html&body& &!-- 表格工具栏 --& &div id=&tb&&gt...
基于Jquery easyui 选中特定的tab并更新
获取选中的 Tab
// 获取选中的 tab panel 和它的 tab 对象
pp = $('#tt').tabs('getSelected'); ...
jquery easyui tabs的刷新问题
做一个首页自定义的功能，刚开始不知道如何刷新tabs。采用的是先关闭，再新建。 $(&#&+tabPanel).tabs(close,首页);
新建： $(&#&+tabPanel).tabs(ad...
easyui tabs切换 已打开时更新数据
在使用easyui控件开发管理系统界面时，比较常见的模式是左边菜单导航，右边采用tabs结合iframe切换不同页面每次点击左边导航菜单时，右边加载对应的页面，关于tab页面切换，参照官方demo，代...
easyui刷新指定tab页里面的数据
主页Home/Index中使用tab管理，在主页中设置一个刷新的方法。
* 刷新指定的tab里面的数据
* @param title 选项卡标题
* @param refreshTab...
EasyUI刷新tab的页面
EasyUI刷新tab的页面代码：function() {
var selectTab = $('#tt').tabs('getSelected');
var url =$(select...
easyui-tabs 刷新当前tab页
var current_tab = $('#div_tabs').tabs('getSelected');
解决easyui 已打开tab重新加载问题
解决easyui 已打开tab重新加载问题。
easyui tabs 真正刷新用法
//刷新当前标签Tabs
function RefreshTab(currentTab) {
var url = $(currentTab.panel('op...
总结目前用Jquery-Easyui做后台，遇到datagrid分页及数据刷新问题
一、介绍一个使用datagrid时，为datagrid表格填充后台数据时的陷阱及误区** 1. 在网上搜索时，大部分网友都说在后台java代
码中返回一个固定格式的json对象就可以为datagrid...
没有更多推荐了，$("#tt").tabs('add',{
selected:false,
怎么调用ajax请求呢？求帮助！
场景：main.html页面中代码如下：
&script language="javascript"&$(document).ready(function(){
$("#mainTree").tree({
onClick: function(node){
var urlp = "";
if(node.text=="权限管理"){
urlp = "main/authMgr.html";
var flag = $("#tt").tabs("exists",node.text);
if(!flag){
$("#tt").tabs("add",{
title:node.text,
selected:true,
closable:true,
}); -------------------------这里 ，想在添加tabs时 异步请求后台服务url 以获取json数据显示在新打开的页面上。
$("#tt").tabs('select',node.text);
});});&/script&
<dd style="float:cursor:" title="声誉值：
该问题被发起重新开启投票
投票剩余时间：
之前被关闭原因：
该问题被发起删除投票
投票剩余时间：
距离悬赏到期还有：
参与关闭投票者：
关闭原因：
该问题已经被锁定
锁定原因：（）
保护原因：避免来自新用户不合宜或无意义的致谢、跟帖答案。
该问题已成功删除，仅对您可见，其他人不能够查看。
用tabs的onAdd事件, 以下代码供参考:
var index = 0;
function addPanel(){
$('#tt').tabs('add',{
title: 'Tab'+index,
content: '&div id="tab'+index+'"&BlankBlank&/div&',
closable: true
$(function(){
$('#tt').tabs({
onAdd: function(title,index){
var i=index+1;
$.get('/aaa.php',function(data){
$('#tab'+i).html(data);
加入tab时, tab里的内容会被替换为ajax返回的内容.
&html&&head&
&meta http-equiv="Content-Type" content="text/ charset=UTF-8"&
&meta name="keywords" content="jquery,ui,easy,easyui,web"&
&meta name="description" content="easyui help you build your web page easily!"&
&title&jQuery EasyUI Demo&/title&
&link rel="stylesheet" type="text/css" href="http://www.w3cschool.cc/try/jeasyui/themes/default/easyui.css"&
&link rel="stylesheet" type="text/css" href="http://www.w3cschool.cc/try/jeasyui/themes/icon.css"&
&script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"&&/script&
&script type="text/javascript" src="http://www.w3cschool.cc/try/jeasyui/jquery.easyui.min.js"&&/script&
function addTab(title, url){
if ($('#tt').tabs('exists', title)){
$('#tt').tabs('select', title);
var content = '&iframe scrolling="auto" frameborder="0"
src="'+url+'" style="width:100%;height:100%;"&&/iframe&';
$('#tt').tabs('add',{
title:title,
content:content,
closable:true
&/script&&/head&&body&
&div style="margin-bottom:10px"&
&a href="#" class="easyui-linkbutton" onclick="addTab('google','http://www.google.com')"&google&/a&
&a href="#" class="easyui-linkbutton" onclick="addTab('jquery','http://jquery.com/')"&jquery&/a&
&a href="#" class="easyui-linkbutton" onclick="addTab('easyui','http://jeasyui.com/')"&easyui&/a&
&div id="tt" class="easyui-tabs" style="width:400height:250"&
&div title="Home"&
&/div&&/body&&/html&
德问是一个专业的编程问答社区，请
后再提交答案
关注该问题的人
共被浏览 (7167) 次