在项目实际开发中，有将打开的各个链接页面隔离的需求（防止静态资源起冲突），这个时候常规思路就是使用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方式打开页面（解决共用静态文件引入加载的问题）的更多相关文章

  1. fopen()函数以"a+"方式打开一个不存在的文件后读写出现问题

    问题:在完成课后习题的时候,使用fopen()函数以"a+"方式打开一个不存在的文件时,写入.读取出现错误: //添加用户输入单词后,在单词头加入编号,确保编号跟着前面的开始排序 ...

  2. linux函数深入探索——open函数打开文件是否将文件内容加载到内存空间

    转自:https://blog.csdn.net/qq_17019203/article/details/85051627 问题:open(2)函数打开文件是否将文件内容加载到内存空间 首先,文件打开 ...

  3. 大量客户反映wordpress的网站打开巨慢，经分析发现，这些网站大都使用了google的字体服务，由于最近google的服务已经被大陆屏蔽，所以wordpress的网站打开时，会卡在字体加载上。

     一会你安装完wp,发现打开巨卡的话,看看这个帖子:http://bbs.myhostcn.com/thread-1026-1-1.html最近一段时间,大量客户反映wordpress的网站打开巨慢, ...

  4. 关于win7系统中所有exe文件都被以word方式打开的解决方法

    手残一刻,电脑桌面所有的软件快捷方式都变成了word的打开方式,鼠标右键选中某exe文件也没打开方式那个选项, 第一次尝试: 在控制面板——默认程序中修改默认打开方式,但是没有找到解决方法

  5. 1.引入必要的文件 2.加载 UI 组件的方式 4.Parser 解析器

    //引入 jQuery 核心库,这里采用的是 2.0 <scripttype="text/javascript"src="easyui/jquery.min.js& ...

  6. 打开地图文件和shape文件代码加载Mxd文档

    代码加载Mxd文档 用代码添加Mxd文档,用到AxMapControl.LoadMxFile(sFilePath),我们只要将Mxd文档的路径传给这个方法即可 /// <summary>  ...

  7. netcore2.0 ORM框架中如何配置自定义的主外键加载

    环境:netcore2.0 DB :mysql ORM:Ant https://github.com/yuzd/AntData.ORM/tree/netcore2 [给我一个star吧] NUGET: ...

  8. [转]IE9.0或者360下js(JavaScript、jQuery)不能正确执行(加载)，按F12后执行正常;Firefox下ajax的success返回数据data(json、string)无法获取

    兼容问题1: 页面的分享等插件加载不全,并无法点击. 兼容问题2: IE下页面选择器(#id..class.etc.)绑定click事件无法访问到,后台springmvc方法,也无法获取ajax的su ...

  9. vue2.0中，由于页面完成之后dom还未加载完成如何进行操作

    再vue中,当页面加载完成以后,dom还没有加载,是无法获取进行操作的,但是在vue2.0中提供了一个方法:this.$nextTick,在这个回调函数里面写dom操作即可: 如下代码: create ...

随机推荐

  1. Eclipse中一个开发AspectJ的插件安…

    eclipse4.2 EE版本插件安装 Eclipse最新版本Juno版本发布.部分插件版本跟不上. 选择自己需要的插件安装. eclipse http://www.eclipse.org/downl ...

  2. C# 测试代码#if DEBUG使用

    代码示例: #if DEBUG      Console.WriteLine("DEBUG:11111111111"); #else       Console.WriteLine ...

  3. Object Detection(RCNN, SPPNet, Fast RCNN, Faster RCNN, YOLO v1)

    RCNN -> SPPNet -> Fast-RCNN -> Faster-RCNN -> FPN YOLO v1-v3 Reference RCNN: Rich featur ...

  4. bzoj 4788: [CERC2016]Bipartite Blanket【hall定理+状压】

    考虑当前合法的一个点集s,如果他合法,那么一定有一个完备匹配的点集包含这个点集,也就是两边都满足hall定理的话这两边拼起来的点集也满足要求 所以分别状压两边点集用hall定理转移判断当前点集是否合法 ...

  5. —Libre#2009. 「SCOI2015」小凸玩密室

    #2009. 「SCOI2015」小凸玩密室 内存限制:256 MiB时间限制:1000 ms标准输入输出 题目类型:传统评测方式:文本比较 上传者: 匿名 提交提交记录统计讨论测试数据   题目描述 ...

  6. uoj#280. 【UTR #2】题目难度提升（构造）

    传送门 咱先膜一下\(GXZ\)再说 我们先把序列从小到大排序,然后分情况讨论 无解是不存在的,从小到大输出所有数肯定可行 情况一,如果\(a[mid]=a[mid+1]\),因为最终的中位数也是它们 ...

  7. uoj#402. 【CTSC2018】混合果汁（主席树+二分）

    传送门 我们先把果汁按照美味度排序,枚举\(d\),那么肯定是贪心的选择美味程度不小于\(d\)的且最便宜的果汁 发现\(d\)可以二分,那么在主席树上二分就可以了 据说还有整体二分的大佬然而我并不会 ...

  8. [Xcode 实际操作]六、媒体与动画-(6)使用UIBlurEffect给图片添加模糊效果

    目录:[Swift]Xcode实际操作 本文将演示如何给图像添加模糊效果. 在项目导航区,打开视图控制器的代码文件[ViewController.swift] import UIKit class V ...

  9. axios 跨域配置

    axios跨域设置 找到项目config文件夹下的index.js文件,将dev中的proxyTable项中添加配置 proxyTable: { '/api': { target: 'https:// ...

  10. Java基础笔记（六）——进制表示、ASCII码和Unicode编码

    Java中有三种表示整数的方法:十进制.八进制.十六进制. 八进制:以0开头,包括0~7的数字.如:int octal=020;  //定义int型变量存放八进制数据 十六进制:以0x或0X开头,包括 ...