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嵌套功能。