laravel+iframe

菜单列表

 <ul class="nav nav-list" style="top: 0px;">
            <li class="active open">
                <a href="/">
                    <i class="menu-icon fa fa-tachometer"></i> 
                    <span class="menu-text"> 首页 </span> 
                </a> 
                <b class="arrow"></b>                 
            </li> 
            <li class="" url="/test1">               
                <a href="javascript:void(0);" class="dropdown-toggle">
                    <i class="menu-icon fa"></i> 
                    <span class="menu-text"> test1 </span>  
                    <b class="arrow fa fa-angle-down"></b>
                </a> 
                <b class="arrow"></b> 
                            <ul class="submenu nav-hide" style="display: none;">
                        
                        <li class="" url="test1-1">
                            <a href="javascript:void(0);"> 
                                <i class="menu-icon fa fa-caret-right"></i> 
                                test1-1
                            </a> 
                            <b class="arrow"></b>
                        </li> 
                        <li class="" url="test1-2">
                            <a href="javascript:void(0);"> 
                                <i class="menu-icon fa fa-caret-right"></i> 
                                test1-2
                            </a> 
                            <b class="arrow"></b>
                        </li> 
                </ul>                                   
            </li> 
            
            <li class="" url="/test1">
                
                <a href="javascript:void(0);" class="dropdown-toggle"> 
    
                    <i class="menu-icon fa"></i> 
                    <span class="menu-text"> test1 </span> 
                     
                    <b class="arrow fa fa-angle-down"></b>
                
                </a> 
                <b class="arrow"></b> 
                            <ul class="submenu nav-hide" style="display: none;">
                        
                        <li class="" url="test2-1">
                            <a href="javascript:void(0);"> 
                                <i class="menu-icon fa fa-caret-right"></i> 
                                test1-1
                            </a> 
                            <b class="arrow"></b>
                        </li> 
                        <li class="" url="test2-2">
                            <a href="javascript:void(0);"> 
                                <i class="menu-icon fa fa-caret-right"></i> 
                                test2-2
                            </a> 
                            <b class="arrow"></b>
                        </li> 
                        
                </ul>
                                    
            </li> 
            
        </ul>

菜单列表对应的js

  <script src="assets/js/jquery-2.1.4.min.js></script>
        <script>
        $(function () {
              $('.nav ul > li').click(function () {
                
                var self = $(this);
                var url = self.attr("url");
                $('#iframeMain').attr('src', url);
                self.siblings().removeClass('active');
                self.addClass('active');
                
                var parent = $(this).parent().parent();
                parent.siblings().removeClass('active open');
                parent.addClass('active open');
                parent.siblings().children('ul').attr('style', 'display:none;');
                parent.siblings().children('ul').children('li').attr('class', '');
              });
        })
        </script>

iframe框

 <iframe name="iframeMain" id="iframeMain" src="/main" scrolling="no" frameborder="0" width="100%" height="100%">
            该浏览器不支持iframe,请使用其他浏览器!
            </iframe>
    <!--iframe框自适应js-->
            <script type="text/javascript">
            function changeFrameHeight(){
                var ifm= document.getElementById("iframeMain"); 
                ifm.height=document.documentElement.clientHeight;
            }
            window.onresize=function(){  
                 changeFrameHeight();  
            } 
            </script>
        

在laravel框架中,声明一个首页controller和view,ifarme放在首页view中,其他controller和view正常对应,通过首页iframe调用其他页面来实现管理后台的iframe嵌套功能。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值