首页 > 代码库 > 解决easyui tabs中href无法跨域跳转

解决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=http://www.mamicode.com/"__PUBLIC__/jquery-easyui-1.4.1/jquery.min.js"></script>  <script type="text/javascript" src=http://www.mamicode.com/"__PUBLIC__/jquery-easyui-1.4.1/jquery.easyui.min.js"></script>  <link rel="stylesheet" type="text/css" href=http://www.mamicode.com/"__PUBLIC__/jquery-easyui-1.4.1/themes/default/easyui.css">      <link rel="stylesheet" type="text/css" href=http://www.mamicode.com/"__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="http://www.mamicode.com/‘ + 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方式加载数据的特点:

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

content方式加载数据的特点:

  1. 比较灵活,你可以在脚本里面拼写html代码,然后赋值给tab的content属性,不过这种写法会使得代码易读性变差。
  2. 可以把iframe赋给content,把一个iframe嵌入也就没有什么不能完成的了。
  3. 使用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="http://www.mamicode.com/‘ + url + ‘" frameborder=0 height=100% width=100% scrolling=no></iframe>

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