解决easyui tabs中href无法跨域跳转
发布时间:2020-12-16 02:11:12 所属栏目:百科 来源:网络整理
导读:!DOCTYPE HTMLhtmlheadmeta http-equiv="content-type" content="text/html" /meta name="author" content="blog.anchen8.net" / script type="text/javascript" src="__PUBLIC__/jquery-easyui-1.4.1/jquery.min.js"/scriptscript type="text/javascript" s
<!DOCTYPE HTML> <html> <head> <meta http-equiv="content-type" content="text/html" /> <meta name="author" content="blog.anchen8.net" /> <script type="text/javascript" src="__PUBLIC__/jquery-easyui-1.4.1/jquery.min.js"></script> <script type="text/javascript" src="__PUBLIC__/jquery-easyui-1.4.1/jquery.easyui.min.js"></script> <link rel="stylesheet" type="text/css" href="__PUBLIC__/jquery-easyui-1.4.1/themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="__PUBLIC__/jquery-easyui-1.4.1/themes/icon.css"> <title>easyui测试</title> <style> .ico{width:300px;height:200px;float:left;} .menu{width:150px;height:50px;margin-top:5px;} ul{text-align:left;} li{text-align:left;} </style> <script> var url="<{:U('User/getUserList')}>"; $(function(){ //tabs绑定右键事件 $('#tabs').tabs({ //添加默认tab onContextMenu:function(e,title){ e.preventDefault();//取消对象e的默认事件 $('#rightmenu').menu('show',{ left: e.pageX,top: e.pageY }); $('#tabs').tabs('select',title); },}); //tree绑定单击事件 $('#menu_tree').tree({ onClick:function(node){ //添加节点到panel中 //alert(JSON.stringify(node)); var title=node.text; if($('#tabs').tabs('exists',title) || node.children){ $('#tabs').tabs('select',title); }else{ $('#tabs').tabs('add',{ title:title,closable:true,//content: '<iframe src="' + url + '" frameborder=0 height=100% width=100% scrolling=no></iframe>',//frame加载所需要页面。href:只是加载页面,且不能跨域 <strong> </strong><span style="color:#000099;"><strong>href:'www.baidu.com'</strong>,</span> msg :"正在加载数据,请稍候...",tabWidth:100 }); } } }); // 全部关闭 $('#closeall').click(function() { var taball = $('#tabs').tabs('tabs'); var title = []; var j = 0; for (var i = 0 in taball) { <span style="color:#CC0000;">console.dir(taball[i].panel('options'));</span> if (taball[i].panel('options').closable) { title[j] = taball[i].panel('options').title; j++; title.length = j; } } for (var v = 0 in title) { $('#tabs').tabs('close',title[v]); } }); // 关闭当前 $('#closethis').click(function() { var currTab = $('#tabs').tabs('getSelected'); if (currTab.panel('options').closable) { $('#tabs').tabs('close',currTab.panel('options').title); } }); // 关闭除当前之外的TAB $('#cloSEOther').click(function() { var taball = $('#tabs').tabs('tabs'); var currTab = $('#tabs').tabs('getSelected'); var currTitle = currTab.panel('options').title; var title = []; var j = 0; for (var i = 0 in taball) { if (taball[i].panel('options').title != currTitle) { if (taball[i].panel('options').closable) { title[j] = taball[i].panel('options').title; j++; title.length = j; } } } if (j == 0) { showMsg('没有可关闭的选项卡了!'); } else { for (var v = 0 in title) { $('#tabs').tabs('close',title[v]); } } return false; }); // 关闭当前右侧的TAB $('#closeright').click(function() { var taball = $('#tabs').tabs('tabs'); var currTab = $('#tabs').tabs('getSelected'); var currTitle = currTab.panel('options').title; var title = []; var j = 0; var st = false; for (var i = 0 in taball) { if (currTitle == taball[i].panel('options').title) { st = true; } if (st) { if (taball[i].panel('options').title != currTitle) { if (taball[i].panel('options').closable) { title[j] = taball[i].panel('options').title; j++; title.length = j; } } } } if (j == 0) { showMsg('右侧没有可关闭的选项卡了!'); } else { for (var v = 0 in title) { $('#tabs').tabs('close',title[v]); } } return false; }); // 关闭当前左侧的TAB $('#closeleft').click(function() { var taball = $('#tabs').tabs('tabs'); var currTab = $('#tabs').tabs('getSelected'); var currTitle = currTab.panel('options').title; var title = []; var j = 0; var st = true; for (var i = 0 in taball) { if (currTitle == taball[i].panel('options').title) { st = false; } if (st) { if (taball[i].panel('options').closable) { title[j] = taball[i].panel('options').title; j++; title.length = j; } } } if (j == 0) { showMsg('左侧侧没有可关闭的选项卡了!'); } else { for (var v = 0 in title) { $('#tabs').tabs('close',title[v]); } } }); // 退出 $("#mmexit").click(function() { $('#tabmenus').menu('hide'); }); }); </script> </head> <body class="easyui-layout" id="body"> <div data-options="region:'north',split:true" style="height:100px;"> <div class="ico">按钮一</div> <div class="ico">按钮二</div> <div class="ico">按钮三</div> <div class="ico">按钮四</div> </div> <div data-options="region:'west',split:true" style="width:150px;" > <!-- <div style="width:150px;height:50px;margin-top:5px;border:1px solid gray">系统设置</div> <div style="width:150px;height:50px;margin-top:5px;border:1px solid gray">会员管理</div> <div style="width:150px;height:50px;margin-top:5px;border:1px solid gray">每日上市</div> --> <div class="easyui-accordion"> <div title="导航菜单" data-options="iconCls:'icon-nav',collapsible:false" style="overflow:auto;padding:10px;"> </div> <div title="便利店设置" data-options="iconCls:'icon-set',selected:true" style="padding:10px;"> <ul class="easyui-tree" id="menu_tree"> <li>大厨特制</li> <li>小吃东西</li> <li> <span>其他东西</span> <ul> <li>方便面</li> <li>挂面</li> <li>面</li> </ul> </li> </ul> </div> <div title="便利店设置" style="padding:10px;"> </div> </div> </div> <div data-options="region:'center',split:true" id="tab_parent"> <div class="easyui-tabs" id="tabs" style="height:800px;"> <div title="系统设置" data-options="closable:false" style="overflow:auto;padding:20px;display:none;"> 系统设置 </div> </div> </div> <div id="rightmenu" class="easyui-menu" style=""> <div data-options="iconCls:'icon-cancel'" id="closethis"> 关闭 </div> <div id="closeall"> 关闭全部 </div> <div id="cloSEOther"> 关闭其他 </div> <div class="menu-sep"></div> <div id="closeright"> 关闭右侧标签页 </div> <div id="closeleft"> 关闭左侧标签页 </div> </div> </body> </html> tabs加载页面分为两种方式 href方式加载数据的特点:
在代码蓝色字体(href:'www.baidu.com',)中,easyui无法加载百度网站的内容,换其他网站尝试也不可以。究其原因在于,浏览器在进行ajex跳转时,为了保证服务器安全和数据安全,浏览器会禁止跨域ajex的请求。打个比方:某个网站的某张页面被你写入了一些js,这些js有些ajax操作 问题: 1.tabs是panel的子类,tabs依赖于panel,那为什么64行部分不能改为:希望大家指教下 console.dir(taball[i].tabs('options')); (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |