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

<!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方式加载数据的特点：

被加载的页面只有body元素内部的内容才会被加载，也就是jQuery的ajax请求的只是html片段。
加载远程url时有遮罩效果，也就是“等待中……”效果，用户体验较好。
当加载的页面布局较为复杂，或者有较多的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行部分不能改为：希望大家指教下

 console.dir(taball[i].tabs('options'));

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

相关文章