新随笔  :: 订阅 订阅  :: 管理

解决easyui tabs中href无法跨域跳转

Posted on 2015-12-09 21:19  redcoatjk  阅读(780)  评论(0)  编辑  收藏  举报

http://blog.csdn.net/ccyours/article/details/41897343

 

版权声明：本文为博主原创文章，未经博主允许不得转载。

[javascript] view plaincopyprint?在CODE上查看代码片派生到我的代码片
  1. <!DOCTYPE HTML>  
  2. <html>  
  3. <head>  
  4.     <meta http-equiv="content-type" content="text/html" />  
  5.     <meta name="author" content="blog.anchen8.net" />  
  6.     <script type="text/javascript" src="__PUBLIC__/jquery-easyui-1.4.1/jquery.min.js"></script>  
  7.     <script type="text/javascript" src="__PUBLIC__/jquery-easyui-1.4.1/jquery.easyui.min.js"></script>  
  8.     <link rel="stylesheet" type="text/css" href="__PUBLIC__/jquery-easyui-1.4.1/themes/default/easyui.css">    
  9.     <link rel="stylesheet" type="text/css" href="__PUBLIC__/jquery-easyui-1.4.1/themes/icon.css">    
  10.     <title>easyui测试</title>  
  11.     <style>  
  12.     .ico{width:300px;height:200px;float:left;}  
  13.     .menu{width:150px;height:50px;margin-top:5px;}  
  14.     ul{text-align:left;}  
  15.     li{text-align:left;}  
  16.     </style>  
  17.     <script>  
  18.         var url="<{:U('User/getUserList')}>";  
  19.         $(function(){  
  20.               
  21.             //tabs绑定右键事件  
  22.             $('#tabs').tabs({  
  23.                 //添加默认tab  
  24.   
  25.                 onContextMenu:function(e,title){  
  26.                     e.preventDefault();//取消对象e的默认事件  
  27.                     $('#rightmenu').menu('show',{  
  28.                         left: e.pageX,  
  29.                         top: e.pageY  
  30.                     });  
  31.                     $('#tabs').tabs('select', title);  
  32.                 },  
  33.             });  
  34.               
  35.             //tree绑定单击事件             
  36.             $('#menu_tree').tree({                 
  37.                 onClick:function(node){  
  38.                     //添加节点到panel中  
  39.                     //alert(JSON.stringify(node));  
  40.                     var title=node.text;                  
  41.                     if($('#tabs').tabs('exists',title) || node.children){  
  42.                         $('#tabs').tabs('select',title);  
  43.                     }else{  
  44.                         $('#tabs').tabs('add',{  
  45.                             title:title,  
  46.                             closable:true,  
  47.                             //content: '<iframe src="' + url + '" frameborder=0 height=100% width=100% scrolling=no& gt;</iframe>',//frame加载所需要页面。href:只是加载页面，且不能跨域  
  48.                             
  49.                            <strong> </strong><span style="color:#000099;"><strong>href:'www.baidu.com'</strong>,</span>                         
  50.                             msg :"正在加载数据，请稍候...",  
  51.                             tabWidth:100   
  52.                         });   
  53.                     }                    
  54.                 }                 
  55.             });   
  56.           
  57.               
  58.             // 全部关闭  
  59.            $('#closeall').click(function() {  
  60.             var taball = $('#tabs').tabs('tabs');  
  61.             var title = [];  
  62.             var j = 0;  
  63.             for (var i = 0 in taball) {  
  64.              <span style="color:#CC0000;">console.dir(taball[i].panel('options'));</span>  
  65.                if (taball[i].panel('options').closable) {  
  66.                 title[j] = taball[i].panel('options').title;  
  67.                 j++;  
  68.                 title.length = j;  
  69.                }  
  70.             }  
  71.             for (var v = 0 in title) {  
  72.                $('#tabs').tabs('close', title[v]);  
  73.             }  
  74.             });  
  75.              
  76.             // 关闭当前  
  77.            $('#closethis').click(function() {  
  78.             var currTab = $('#tabs').tabs('getSelected');  
  79.             if (currTab.panel('options').closable) {  
  80.                $('#tabs').tabs('close', currTab.panel('options').title);  
  81.             }  
  82.            });  
  83.              
  84.            // 关闭除当前之外的TAB  
  85.            $('#closeother').click(function() {  
  86.             var taball = $('#tabs').tabs('tabs');  
  87.             var currTab = $('#tabs').tabs('getSelected');  
  88.             var currTitle = currTab.panel('options').title;  
  89.             var title = [];  
  90.             var j = 0;  
  91.             for (var i = 0 in taball) {  
  92.                if (taball[i].panel('options').title != currTitle) {  
  93.                 if (taball[i].panel('options').closable) {  
  94.                    title[j] = taball[i].panel('options').title;  
  95.                    j++;  
  96.                    title.length = j;  
  97.                 }  
  98.                }  
  99.             }  
  100.             if (j == 0) {  
  101.                showMsg('没有可关闭的选项卡了！');  
  102.             } else {  
  103.                for (var v = 0 in title) {  
  104.                 $('#tabs').tabs('close', title[v]);  
  105.                }  
  106.             }  
  107.             return false;  
  108.            });  
  109.            // 关闭当前右侧的TAB  
  110.            $('#closeright').click(function() {  
  111.             var taball = $('#tabs').tabs('tabs');  
  112.             var currTab = $('#tabs').tabs('getSelected');  
  113.             var currTitle = currTab.panel('options').title;  
  114.             var title = [];  
  115.             var j = 0;  
  116.             var st = false;  
  117.             for (var i = 0 in taball) {  
  118.                if (currTitle == taball[i].panel('options').title) {  
  119.                 st = true;  
  120.                }  
  121.                if (st) {  
  122.                 if (taball[i].panel('options').title != currTitle) {  
  123.                    if (taball[i].panel('options').closable) {  
  124.                     title[j] = taball[i].panel('options').title;  
  125.                     j++;  
  126.                     title.length = j;  
  127.                    }  
  128.                 }  
  129.                }  
  130.             }  
  131.             if (j == 0) {  
  132.                showMsg('右侧没有可关闭的选项卡了！');  
  133.             } else {  
  134.                for (var v = 0 in title) {  
  135.                 $('#tabs').tabs('close', title[v]);  
  136.                }  
  137.             }  
  138.             return false;  
  139.            });  
  140.            // 关闭当前左侧的TAB  
  141.            $('#closeleft').click(function() {  
  142.             var taball = $('#tabs').tabs('tabs');  
  143.             var currTab = $('#tabs').tabs('getSelected');  
  144.             var currTitle = currTab.panel('options').title;  
  145.             var title = [];  
  146.             var j = 0;  
  147.             var st = true;  
  148.             for (var i = 0 in taball) {  
  149.                if (currTitle == taball[i].panel('options').title) {  
  150.                 st = false;  
  151.                }  
  152.                if (st) {  
  153.                 if (taball[i].panel('options').closable) {  
  154.                    title[j] = taball[i].panel('options').title;  
  155.                    j++;  
  156.                    title.length = j;  
  157.                 }  
  158.                }  
  159.             }  
  160.             if (j == 0) {  
  161.                showMsg('左侧侧没有可关闭的选项卡了！');  
  162.             } else {  
  163.                for (var v = 0 in title) {  
  164.                 $('#tabs').tabs('close', title[v]);  
  165.                }  
  166.             }  
  167.            });  
  168.            // 退出  
  169.            $("#mmexit").click(function() {  
  170.             $('#tabmenus').menu('hide');  
  171.            });  
  172.         });  
  173.           
  174.           
  175.           
  176.     </script>  
  177. </head>  
  178.   
  179. <body class="easyui-layout" id="body">  
  180.     <div data-options="region:'north',split:true" style="height:100px;">  
  181.         <div class="ico">按钮一</div>  
  182.         <div class="ico">按钮二</div>  
  183.         <div class="ico">按钮三</div>  
  184.         <div class="ico">按钮四</div>  
  185.     </div>  
  186.     <div data-options="region:'west',split:true"  style="width:150px;" >  
  187.         <!--  
  188.         <div style="width:150px;height:50px;margin-top:5px;border:1px solid gray">系统设置</div>  
  189.         <div style="width:150px;height:50px;margin-top:5px;border:1px solid gray">会员管理</div>  
  190.         <div style="width:150px;height:50px;margin-top:5px;border:1px solid gray">每日上市</div>  
  191.         -->  
  192.         <div class="easyui-accordion">  
  193.              <div title="导航菜单" data-options="iconCls:'icon-nav',collapsible:false" style="overflow:auto;padding:10px;">  
  194.              </div>  
  195.             <div title="便利店设置" data-options="iconCls:'icon-set',selected:true" style="padding:10px;">  
  196.                <ul class="easyui-tree" id="menu_tree">  
  197.                 <li>大厨特制</li>  
  198.                 <li>小吃东西</li>  
  199.                 <li>  
  200.                     <span>其他东西</span>  
  201.                     <ul>  
  202.                         <li>方便面</li>  
  203.                         <li>挂面</li>  
  204.                         <li>面</li>  
  205.                     </ul>  
  206.                 </li>  
  207.                </ul>  
  208.             </div>  
  209.             <div title="便利店设置" style="padding:10px;">  
  210.                   
  211.             </div>  
  212.           
  213.         </div>  
  214.     </div>  
  215.     <div data-options="region:'center',split:true" id="tab_parent">  
  216.         <div class="easyui-tabs" id="tabs" style="height:800px;">  
  217.              <div title="系统设置" data-options="closable:false" style="overflow:auto;padding:20px;display:none;">  
  218.                 系统设置  
  219.             </div>  
  220.         </div>  
  221.     </div>  
  222.       
  223.   
  224.   
  225.     <div id="rightmenu" class="easyui-menu" style="">  
  226.         <div data-options="iconCls:'icon-cancel'" id="closethis">  
  227.             关闭  
  228.         </div>  
  229.         <div id="closeall">  
  230.             关闭全部  
  231.         </div>  
  232.         <div id="closeother">  
  233.             关闭其他  
  234.         </div>  
  235.         <div class="menu-sep"></div>  
  236.         <div id="closeright">  
  237.             关闭右侧标签页  
  238.         </div>  
  239.         <div id="closeleft">  
  240.             关闭左侧标签页  
  241.         </div>  
  242.     </div>  
  243. </body>  
  244. </html>  

tabs加载页面分为两种方式

     href方式加载数据的特点：

  1. 被加载的页面只有body元素内部的内容才会被加载，也就是jQuery的ajax请求的只是html片段。
  2. 加载远程url时有遮罩效果，也就是“等待中……”效果，用户体验较好。
  3. 当加载的页面布局较为复杂，或者有较多的js脚本需要运行的时候，编码往往就需要谨慎了，容易出问题，后面会详细谈       

content方式加载数据的特点：

  • 比较灵活，你可以在脚本里面拼写html代码，然后赋值给tab的content属性，不过这种写法会使得代码易读性变差。
  • 可以把iframe赋给content，把一个iframe嵌入也就没有什么不能完成的了。
  • 使用iframe会造成客户端js重复加载，浪费资源，比如说你主页面要引用easyui的库，你的iframe也要引用，浪费就产生了。


在代码蓝色字体（href:'www.baidu.com',）中，easyui无法加载百度网站的内容，换其他网站尝试也不可以。究其原因在于，浏览器在进行ajex跳转时，为了保证服务器安全和数据安全，浏览器会禁止跨域ajex的请求。打个比方：某个网站的某张页面被你写入了一些js ,这些js有些ajax操作
如果某个用户访问了这张页面，你的js就可以获得用户的某些信息(cookie，本地文件等)然后通过ajax发送回你的服务器。 这样你就可以获得任意你想获得的数据了。ajex的存在本身就是简化请求和不断刷新，禁用跨域可以保证ajex使用者的安全。因此easyui在href 中，也会禁止ajex的跨域请求。但是并不是说你想加载其他域名的内容不能实现。可以采用content加载方式。将蓝色文字替换为：

content: '<iframe src="' + url + '" frameborder=0 height=100% width=100% scrolling=no></iframe>'其中url替换成任意的网址即可。

问题：

 1.tabs是panel的子类，tabs依赖于panel，那为什么64行部分不能改为：希望大家指教下

[javascript] view plaincopyprint?在CODE上查看代码片派生到我的代码片
    1. console.dir(taball[i].tabs('options'));