EasyUI Tabs + Yii2.0实现iframe方式打开页面(解决共用静态文件引入加载的问题)

Posted 冰狼爱魔

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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方式打开页面(解决共用静态文件引入加载的问题)的主要内容,如果未能解决你的问题,请参考以下文章

。net中我用jquery.easyui.tabs怎么实现刷新?点击刷新当前页怎么实现啊?求高手帮忙!

一个基于 EasyUI 的前台架构封装操作Tabs的JS代码

easyui选项卡[Tabs]如何实现拖拽功能?

jQuery easyui刷新当前tabs的方法

JavaScript提高:005:ASP.NET使用easyUI TABS标签显示问题

easyui怎么获取tab中所有的选项卡