解决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>
解决easyui tabs中href无法跨域跳转的更多相关文章
- 如何在ASP.NET Core中实现CORS跨域
注:下载本文的完整代码示例请访问 > How to enable CORS(Cross-origin resource sharing) in ASP.NET Core 如何在ASP.NET C ...
- Android中WebView的跨域漏洞分析和应用被克隆问题情景还原(免Root获取应用沙盒数据)
一.前言 去年年底支付宝的被克隆漏洞被爆出,无独有偶就是腾讯干的,其实真正了解这个事件之后会发现,感觉是针对支付宝.因为这个漏洞找出肯定花费了很大劲,主要是因为支付宝的特殊业务需要开启了WebView ...
- 关于vue-cli3中配置请求跨域的问题
关于vue-cli3中配置请求跨域的问题 根据Vue CLI3官方文档, 需要在vue.config.js文件中配置devServer.proxy选项来解决跨域问题. 关于vue.config.js文 ...
- 解决Vue调用springboot接口403跨域问题
最近在做一个前后端分离的项目, 前端用的是Vue后端使用的是springboot, 在项目整合的时候发现前端调用后端接口报错403跨域请求问题 前端跨域请求已解决, 那么问题就出在后端了, 找了一些资 ...
- 在ASP.NET MVC3 中利用Jsonp跨域访问
在ASP.NET MVC3 中利用Jsonp跨域访问 在信息系统开发的时,根据相关业务逻辑难免会多系统之间互相登录.一般情况下我们需要在多系统之间使用多个用户名和密码.这样客户就需要在多个系统之间重复 ...
- 【基础】Html跨域跳转问题整理
今天遇到一个问题,是有关 跨域跳转问题,涉及到知识比较基础. 具体问题是: A站点的 PageA (Post数据)到 B站点的 PageB,PageB接受到后Redirect到B站的 PageC: ...
- Vue(项目踩坑)_解决vue中axios请求跨域的问题
一.前言 今天在做项目的时候发现axios不能请求跨域接口 二.主要内容 1.之前直接用get方式请求聚合数据里的接口报错如下 2.当前请求的代码 3.解决方法 (1)在项目目录中依次找到:confi ...
- Vue 项目中遇到的跨域问题及解决方法
原文:https://www.jb51.net/article/137278.htm 问题描述 前端 vue 框架,跨域问题后台加这段代码 header("Access-Control-Al ...
- 关于在JS中AJAX导致跨域问题的解决
在部署一个原声的前端项目的时候,请求该服务器后端接口时发现出现了CORS跨域的问题,但是服务端已经做了同源策略的兼容,常见问题,遂记录. 报错信息: XMLHttpRequest cannot loa ...
随机推荐
- [Java基础] Java多线程-工具篇-BlockingQueue
转载自: http://www.cnblogs.com/jackyuj/archive/2010/11/24/1886553.html 前言: 在新增的Concurrent包中,BlockingQue ...
- iOS:Objective-c的MD5/SHA1加密算法的实现
介绍: Objective-c实现MD5和SHA1算法相对还是比较简单的,可以直接调用系统的C/C++共享库来实现调用MD5即Message Digest Algorithm 5(信息-摘要算法 5) ...
- javascript快速入门2--变量,小学生数学与简单的交互
变量 对于变量的理解:变量是数据的代号.如同人的名字一样. var num;//在JavaScript中使用关键字var声明一个变量 在JavaScript中,使用上面的语法,就可以声明一个变量,以便 ...
- 自己做的roguelike+恶魔城游戏《魔塔猎人》已发布。
游戏仍然是标准的roguelike,死亡后回到出生点重新开始,宏观架构上参考了<死亡细胞>,战斗设计上更加强调轻重攻击的组合,再配合236和28系列的搓招技.空中的突进飞腿.副武器等等. ...
- sublime 插件cssrem安装及配置
CSSREM CSSREM 是一个CSS的 px 值转 rem 值的Sublime Text3自动完成插件.先来看看插件的效果: 一个CSS的px值转rem值的Sublime Text 3自动完成插件 ...
- JavaScript面向对象总结
对象(Object)应该算是js中最为重要的部分,也是js中非常难懂晦涩的一部分.更是面试以及框架设计中各出没.本文章,主要参考JavaScript红宝书(JavaScript高级程序设计 第六章)以 ...
- Taobao OpenERP Connector 简要说明
Taobao OpenERP Connector 项目托管地址:https://github.com/buke/openerp-taobao 作者: wangbuke@gmail.com 功能: 1. ...
- Java IO操作：合并流
合并流:把两个文件合并在一起. 主要操作的是内容. 定义: public class SequenceInputStreamextends InputStream 方法摘要: 操作步骤: 1,分别建立 ...
- c++ vector容器的使用,序列倒叙reverse(),容器底部插入一个数值push_back()
问题:程序实现将que[i]添加到que2最后,再将que2反转输出. 例如: 输入 4 1 2 3 4 输出 4 2 1 3 #include<iostream> #include< ...
- ibatis中<![CDATA[使用解释
http://hi.baidu.com/taoxincheng0/blog/item/3916c4ec413f03c22e2e2160.html ibatis中什么时候需要用到: <![CDAT ...