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

  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="‘ + url + ‘" frameborder=0 height=100% width=100% scrolling=no></iframe>

时间： 2024-10-27 04:20:55

解决easyui tabs中href无法跨域跳转的相关文章

jquery.easyui.tabs 中的首个tabs被最后tabs覆盖的问题解决方法

这是由于tabs对href重载的的问题导致,因此我们需要将href更改为其它自定义的属性即可避免此问题的发生. 解决方法如下: 第一步页面端: 循环体开始 <li> <div><a target="tagFrame" href="@n.Url" ><span class="icon icon-sys"> </span>@n.Title</a></div> <

解决前端开发环境中的的跨域问题

一.为什么会有跨越问题是客户端浏览器同源策略导致的,就是浏览器不允许不同源的站点相互访问.试想一下要是没有这个,那站点里的安全信息如cookie,账号/密码等是不是很容易被其它站点获取.二.解决思路知道是客户端浏览器为了安全使用同源策略导致的,而服务端是没有这个限制的,那我们就只能通过服务端进行跨域了.不管是jsonp,core,还是代理的方式,都是需要服务配合的.哈哈,这也是为啥后端和生产环境下比较少听说跨域的问题,所以这里介绍前端开发环境中的几种解决方法.三.解决方案1.完全交予后端解决,配

Iframe和Frame中实现cookie跨域的方法（转载）

在Iframe和Frame中默认是不支持Cookie跨域的,但通过设置P3P协议相关的响应头可以解决这一问题.关于p3p协议: P3P: Platform for Privacy Preferences(隐私偏好平台).隐私偏好平台(P3P)是允许网络站点来宣告它们收集的关于浏览用户他们的意向使用的信息的一个协议.原意是当用户浏览时,授予用户他们个人信息的更多控制. P3P是万维网联盟(W3C)公布的一项隐私保护推荐标准,旨在为网上冲浪的 Internet用户提供隐私保护.现在有越来越多的网站在

Nginx服务器中处理AJAX跨域请求的配置方法讲解

Nginx 实现AJAX跨域请求AJAX从一个域请求另一个域会有跨域的问题.那么如何在nginx上实现ajax跨域请求呢?要在nginx上启用跨域请求,需要添加add_header Access-Control*指令.如下所示: ? 1 2 3 4 5 6 7 8 9 10 11 12 location /{ add_header 'Access-Control-Allow-Origin' 'http://other.subdomain.com'; add_header 'Access-Cont

使用HTML5中postMessage 实现ajax中的POST跨域问题

HTML5中提供了在网页文档之间相互接收与发送信息的功能.使用这个功能,只要获取到网页所在窗口对象的实例,不仅仅同源(域+端口号)的web网页之间可以互相通信,甚至可以实现跨域通信. 浏览器支持程度:IE8+,firefox4+,chrome8+  opera10+ 1. 首先,要想接收从其他的窗口发过来的消息,就必须对窗口对象的message事件进行监听,如下代码: window.addEventListener(“message”, function(){},false); 2. 其次,需要

jquery中ajax处理跨域的三大方式

一.处理跨域的方式: 1.代理 2.XHR2 HTML5中提供的XMLHTTPREQUEST Level2(及XHR2)已经实现了跨域访问.但ie10以下不支持 只需要在服务端填上响应头: ? 1 2 3 header("Access-Control-Allow-Origin:*"); /*星号表示所有的域都可以接受,*/ header("Access-Control-Allow-Methods:GET,POST"); 3.jsonP 原理: ajax本身是不可以跨

跨域 webpack + vue-cil 中 proxyTable 处理跨域

跨域 了解同源政策:所谓"同源"指的是"三个相同". 协议相同 域名相同 端口相同 解决跨域 jsonp 缺点:只能get请求 ,需要修改B网站的代码 cors 这个方案缺点 是 ie6 7 兼容不好(倒是不见得要兼容).需要B网站在响应中加头 postMessage 缺点也是 ie6 7 兼容不好(倒是不见得要兼容).需要修改B网站的代码 iframe window.name 传值得方式很巧妙,兼容性也很好.但是也是需要你能修改B网站代码 服务端主动请求B网站,兼

Spring Boot 2中对于CORS跨域访问的快速支持

原文:https://www.jianshu.com/p/840b4f83c3b5 目前的程序开发,大部分都采用前后台分离.这样一来,就都会碰到跨域资源共享CORS的问题.Spring Boot 2 对此提供了很好的解决方法. 更多CORS介绍,请看这里: CORS介绍 1.注解实现 在Spring Boot 2中,提供了注解的方式来对CORS跨域访问进行支持. 1.1 在方法上注解 可以将@CrossOrigin注解在方法上.这样该方法可以被跨域访问. 在方法上标注 1.2 在Controll

记录我开发工作中遇到HTTP跨域和OPTION请求的一个坑

我通过这篇文章把今天工作中遇到的HTTP跨域和OPTION请求的一个坑记录下来. 场景是我需要在部署在域名a的Web应用里用JavaScript去消费一个部署在域名b的服务器上的服务.域名b上的服务也是我开发的,因此我将域名a加到了该服务的HTTP响应结构的头文件里,这样就允许了域名a上的JavaScript代码用AJAX访问域名b的服务. 域名b上的服务是一个Servlet,允许域名a跨域访问的代码就一行: protected void doGet(HttpServletRequest req