EasyUI Tabs + Yii2.0实现iframe方式打开页面(解决共用静态文件引入加载的问题)
在项目实际开发中,有将打开的各个链接页面隔离的需求(防止静态资源起冲突),这个时候常规思路就是使用iframe来实现!但遇到一个比较棘手的问题,当用easyui Tabs打开一个iframe页面时,怎么解决原有共用静态资源引入的问题。有人建议可以考虑将共用静态资源文件放到一个php文件中,然后每次渲染页面时加载即可,这个时候很多朋友会想到PHP的include()方式,但是每个iframe页面都要include一次,岂不是很麻烦。而且项目的要求是iframe打开和easyui tabs href打开方式要能够自由切换,这就难倒众多小伙伴了!现将实际项目解决该问题的思路和步骤整理如下:
1、在Yii2.0 layouts下新建iframe.php共用视图文件,代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<?php
use yii\helpers\Html;
use yii\bootstrap\Nav;
use yii\bootstrap\NavBar;
use yii\widgets\Breadcrumbs;
use yii\helpers\Url;
use frontend\assets\AppAsset;
use frontend\widgets\Alert;
/* @var $this \yii\web\View */
/* @var $content string */ //AppAsset::register($this); $js['jquery.min.js'] = 'js/jquery.min.js';
$js['easyui.min.js'] = 'easyui1.4.1/jquery.easyui.min.js';
$js['easyui.ext.js'] = 'easyui1.4.1/jquery.easyui.ext.js';
$js['easyui-lang.js'] = 'easyui1.4.1/locale/easyui-lang-zh_CN.js';
$js['global.js'] = 'js/global.js'; foreach ($js as $f){
if (is_file($root.'/web/'.$f)) {
$t = date('ymdHi', filemtime($root.'/web/'.$f));
echo "\r\n<script type=\"text/javascript\" src=\"{$f}?_t=$t\" ></script>";
}
}
?> <html lang="<?= Yii::$app->language ?>">
<head>
<meta charset="<?= Yii::$app->charset ?>"/>
<meta http-equiv="X-UA-Compatible" content="IE=8" />
<link rel="stylesheet" type="text/css" href="easyui1.4.1/themes/insdep/easyui.css" />
<link rel="stylesheet" type="text/css" href="easyui1.4.1/themes/insdep/easyui_animation.css" />
<link rel="stylesheet" type="text/css" href="css/icon.css" />
<link rel="stylesheet" type="text/css" href="css/css.css" /> <script type="text/javascript" src="easyui1.4.1/jquery.edatagrid.js"></script>
<script type="text/javascript" src="easyui1.4.1/jquery.easyui.extend.validate.js"></script>
<?= Html::csrfMetaTags() ?>
</head> <style>
* {margin:0px; padding:0px;}
html, body {margin:0px; padding:0px; width:100%; height:100%}
.test_page_loading{position:absolute; z-index:1000; top:0px; left:0px; margin:0px auto; padding:0px; width:100%; height:100%; filter:alpha(opacity=80); opacity:1.0; background:#F8F8F8; text-align:center}
</style> <body>
<!--首页遮罩-->
<div class="test_page_loading"><div style="margin:20% auto"><image src="css/icons/loading.gif"/><font color="#15428B">页面正在加载中,请稍后···</font></div></div>
<?=$content?>
</body>
</html>
2、因为要兼顾easyui href打开方式与iframe打开方式并存,而又不能影响原来的业务流程,故在视图文件main.php中打开的href加上一个是否是iframe的识别标记,如下所示:
// 添加tabs
addTab: function(node) {
href = node.href;
if (href=='' || href==undefined) {
return;
}
if (node.reload == undefined){
reload = 0;
}else{
reload = parseInt(node.reload);
} // 根据text查tab是否存在,如果存在则判断id是否一致,一致则直接选中,不一致则新建一个tab
mark = node.mark;
text = node.text;
href = node.href;
icon = node.icon != 'null' ? node.icon : '';
outer= parseInt(node.outer); var loadingHtml = '<div class="test_page_loading"><image src="css/icons/loading.gif"/><font color="#15428B">页面正在加载中,请稍后···</font></div>';
var tabsPanel = $('#test-main-tabs');
var tabsLength = tabsPanel.tabs('tabs').length; // 获取选项卡的长度(数量)
var tabsMaxLength = 10; // 定义选项卡的最大长度
var tab = $('#test-main-tabs').tabs('getTab', text );
var tabId = 'user_menu_'+mark;
if (tab && $(tab).attr('id') == tabId){
tabsPanel.tabs('select', text);
if (reload){
if (outer){
var tab = tabsPanel.tabs('getSelected');
/*if (tab){
var index = tabsPanel.tabs('getTabIndex', tab);
tabsPanel.tabs('close', index);
}*/
// 包含?的url链接加上额外参数,解决打开外部链接404问题
if (/\?/g.test(href)) {
href = href + "&isFrame=true"; // 加上iframe打开方式标记
}
var content = '<iframe scrolling="auto" frameborder="0" src="'+ href +'" style="width:100%;height:100%;"></iframe>';
if(tabsLength > tabsMaxLength){
$.messager.alert('提示信息', '为了您的浏览器性能,您最多允许打开'+tabsMaxLength+'个tabs窗口,请先关闭无用的窗口!', 'error');
return false;
}
tabsPanel.tabs('update',{
tab: tab,
options: {
id: tabId,
title: text,
iconCls: icon,
content: content,
fit:true,
closable:true
}
});
}else{
// 注意,tab中如果有dialog之类的,多次刷新tab会导致内存中有多个同样的dialog
tabsPanel.tabs('getSelected').panel('refresh', href);
}
}else{ }
}else{
if (outer){
// 包含?的url链接加上额外参数,解决打开外部链接404问题
if (/\?/g.test(href)) {
href = href + "&isFrame=true";
}
var content = '<iframe scrolling="auto" frameborder="0" src="'+ href +'" style="width:100%;height:100%;"></iframe>';
if(tabsLength > tabsMaxLength){
$.messager.alert('提示信息', '为了您的浏览器性能,您最多允许打开'+tabsMaxLength+'个tabs窗口,请先关闭无用的窗口!', 'error');
return false;
}
tabsPanel.tabs('add',{
id: tabId,
title: text,
iconCls: icon,
content: content,
fit:true,
closable:true
});
}else{
if(tabsLength > tabsMaxLength){
$.messager.alert('提示信息', '为了您的浏览器性能,您最多允许打开'+tabsMaxLength+'个tabs窗口,请先关闭无用的窗口!', 'error');
return false;
}
tabsPanel.tabs('add',{
id: tabId,
title: text,
iconCls: icon,
href: href,
closable:true,
onBeforeLoad: function() {
$('#test-main-tabs').find('.tabs-panels').append(loadingHtml);
}
});
}
}
}
3、因为根据之前的业务tabs都是通过href直接打开的,现要支持iframe打开而不能影响之前的打开方式,也就是两种方式能够随时切换,那么后台渲染视图也要做相应的调整,如下所示:
// BaseController.php
/**
* 控制器动作执行前事件处理,解决iframe方式打开使用iframe公共视图
* @author testMe
* @date 2016-12-04
*/
public function beforeAction($action)
{
// 用iframe方式打开则改变默认的视图布局文件
$isFrame = Yii::$app->request->get('isFrame', '');
if ($isFrame == 'true') {
$this->layout = '@app/views/layouts/iframe';
self::$_isFrame = true;
} else {
self::$_isFrame = false;
} return parent::beforeAction($action);
} /**
* 实现页面iframe方式打开时强制渲染公共视图(因为之前的逻辑都是通过renderPartial局部方式渲染的,而通过iframe要启用新的共用视图文件,所以这里强制使用render包含共用视图的渲染方式)
* @author testMe
* @date 2016-12-04
*/
public function renderPartial($view, $params = [])
{
if (self::$_isFrame) {
return parent::render($view, $params);
} else {
return parent::renderPartial($view, $params);
}
}
EasyUI Tabs + Yii2.0实现iframe方式打开页面(解决共用静态文件引入加载的问题)的更多相关文章
- fopen()函数以"a+"方式打开一个不存在的文件后读写出现问题
问题:在完成课后习题的时候,使用fopen()函数以"a+"方式打开一个不存在的文件时,写入.读取出现错误: //添加用户输入单词后,在单词头加入编号,确保编号跟着前面的开始排序 ...
- linux函数深入探索——open函数打开文件是否将文件内容加载到内存空间
转自:https://blog.csdn.net/qq_17019203/article/details/85051627 问题:open(2)函数打开文件是否将文件内容加载到内存空间 首先,文件打开 ...
- 大量客户反映wordpress的网站打开巨慢,经分析发现,这些网站大都使用了google的字体服务,由于最近google的服务已经被大陆屏蔽,所以wordpress的网站打开时,会卡在字体加载上。
一会你安装完wp,发现打开巨卡的话,看看这个帖子:http://bbs.myhostcn.com/thread-1026-1-1.html最近一段时间,大量客户反映wordpress的网站打开巨慢, ...
- 关于win7系统中所有exe文件都被以word方式打开的解决方法
手残一刻,电脑桌面所有的软件快捷方式都变成了word的打开方式,鼠标右键选中某exe文件也没打开方式那个选项, 第一次尝试: 在控制面板——默认程序中修改默认打开方式,但是没有找到解决方法
- 1.引入必要的文件 2.加载 UI 组件的方式 4.Parser 解析器
//引入 jQuery 核心库,这里采用的是 2.0 <scripttype="text/javascript"src="easyui/jquery.min.js& ...
- 打开地图文件和shape文件代码加载Mxd文档
代码加载Mxd文档 用代码添加Mxd文档,用到AxMapControl.LoadMxFile(sFilePath),我们只要将Mxd文档的路径传给这个方法即可 /// <summary> ...
- netcore2.0 ORM框架中如何配置自定义的主外键加载
环境:netcore2.0 DB :mysql ORM:Ant https://github.com/yuzd/AntData.ORM/tree/netcore2 [给我一个star吧] NUGET: ...
- [转]IE9.0或者360下js(JavaScript、jQuery)不能正确执行(加载),按F12后执行正常;Firefox下ajax的success返回数据data(json、string)无法获取
兼容问题1: 页面的分享等插件加载不全,并无法点击. 兼容问题2: IE下页面选择器(#id..class.etc.)绑定click事件无法访问到,后台springmvc方法,也无法获取ajax的su ...
- vue2.0中,由于页面完成之后dom还未加载完成如何进行操作
再vue中,当页面加载完成以后,dom还没有加载,是无法获取进行操作的,但是在vue2.0中提供了一个方法:this.$nextTick,在这个回调函数里面写dom操作即可: 如下代码: create ...
随机推荐
- [转]sql where 1=1和 0=1 的作用
sql where 1=1和 0=1 的作用 原文地址:http://www.cnblogs.com/junyuz/archive/2011/03/10/1979646.html where 1=1; ...
- TCP 连接的握手信息详解
建立TCP需要三次握手才能建立,而断开连接则需要四次握手.整个过程如下图所示: 先来看看如何建立连接的. 首先Client端发送连接请求报文,Server段接受连接后回复ACK报文,并为这次连接分配资 ...
- windows 代理无法设置上不了网的解决
--- title:windows 代理无法设置的解决 date: 2018-09-12 14:07:04 tags: windows 上网 --- ## 问题描述 Internet 属性 -> ...
- sublime text3设置
我的sublime的设置,ps:这个博文只是为了我自己的一个记录 { "color_scheme": "Packages/Theme - Solarized Flat/S ...
- Primer回顾 标准库类型
string类型的输入操作符: 1.读取并忽略开头所有的空白字符(如空格,换行符,制表符). 2.读取字符直至再次遇到空白字符,读取终止. 用getline读取整行文本 getline.接受两个参 ...
- 《精通Spring4.X企业应用开发实战》读后感第四章(资源访问)
package com.smart.resource; import org.springframework.core.io.ClassPathResource; import org.springf ...
- python http通信实现
http协议通信需要httpServer和httpClient. 在python中 -- httpServer的实现类是server.py文件,要跟实现tcp,udp Server的文件sockets ...
- 关于 == 和 equals() 的区别
对于正在学习java的,以及入行不久的小伙伴们,在面试中经常会被面试官问到 " == 和 equals() 的区别 ?"的问题,你是否回答好了呢? 示例一: //两个基本类型数据 ...
- WPF之触发器
简单触发器<Window x:Class="WpfApp.Window1" xmlns="http://schemas.microsoft.com/winfx/20 ...
- URL辅助方法
URL辅助方法则负责用来产生url地址,那什么时候需要呢,以输出超链接来说,使用Html.ActionLink()辅助方法一定会产生超链接的a标签,如果只是想单纯的输出asp.net mvc的某个网址 ...