iframe基本使用

最新推荐文章于 2025-07-12 16:41:47 发布

原创最新推荐文章于 2025-07-12 16:41:47 发布 · 5.6w 阅读

79 ·

CC 4.0 BY-SA版权

文章标签：

#iframe #后台管理系统 #使用率 #layui

iframe 专栏收录该内容

2 篇文章

订阅专栏

使用场景：页面大部分相同，少部分不一样。比如系统，每一个页面的left_nav和top内容一致，右下边内容在改变。

优点：提高页面代码的重复使用率，让我们偷懒。

缺点：页面url地址没有改变。

本案例用layui，搭建一个简单的后台管理系统框架。

文件结构如下，layui在官网下载即可。

index.html页面代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./layui/css/layui.css">
    <style>
        html,body {
            width: 100%;
            height: 100%;
        }
        .side_left {
            height: 100%;
        }
       .message {
            margin: -8px 28px 0!important;
            border-radius: 50%;
            top: 31%!important;
      }
      .title {
        position: absolute!important;
        /* left: 200px; */
        top: 0;
        color: rgba(255,255,255,.7);
        padding: 0 20px;
        line-height: 60px;
        font-size: 22px;
        font-weight: 600;
    }
    .content {
        top: 100px;
    }
    </style>
</head>
<body>
        <nav class="ayui-layout-admin" style="height:60px;background:#393D49;">
                <!-- 标题 -->
                <h1 class="title">后台管理系统</h1>
                <ul class="layui-nav layui-layout-right">
                    <li class="layui-nav-item">
                        <a href="#">通知
                            <span class="layui-badge message">9</span>
                        </a>
                    </li>
                    <li class="layui-nav-item">
                            <a href="#">退出
                            </a>
                        </li>
                    <li class="layui-nav-item">
                    </li>
                </ul>
            </nav>
            <ul class="layui-nav layui-nav-tree layui-inline side_left">
                <li class="layui-nav-item layui-this">
                    <a href="./index.html">
                        <i class="iconfont icon-shouye1"></i>
                        首页
                    </a>
                </li>
                <li class="layui-nav-item layui-nav-itemed"  id="changeToSet">
                    <a href="javascript:;">
                        <i class="iconfont icon-shouye1"></i>
                        基础设置
                    </a>
                </li>
               
            </ul>
            <div class="layui-body content">
                <iframe src="./main.html" frameborder="0" id="contentIframe"></iframe>
            </div>
            </div>
    <script src="./jquery-3.2.1.min.js"></script>
    <script src="./layui/layui.js"></script>
    <script>
        $(function(){
                $('#changeToSet').on('click',function(){
                    $(window.parent.document).find('#contentIframe').attr('src','./set.html')
                    $(this).addClass('layui-this').siblings().removeClass('layui-this');
                })
        })
        </script>
</body>
</html>

注意：里面iframe标签的使用，通过改变iframe标签的src属性来改变iframe是内容

以下是main.html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
        <h1>这是首页标题</h1>
        <p>你好，我是首页页面内容</p>
</body>
</html>

以下是set.html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
        <h1>这是基础设置页面标题</h1>
        <p>你好，我是基础设置页面内容</p>
       <button id="changeToTest1">点击切换到test1页面</button>
    <script src='./jquery-3.2.1.min.js'></script>
    <script>
      $(function(){
           $('#changeToTest1').on('click',function(){
               $(window.parent.document).find('#contentIframe').attr('src','./test1.html')
           })
      })
    </script>
</body>
</html>

以下是test1.html页面代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
        <h1>这是test1页面标题</h1>
        <p>你好，我是test1页面内容</p>
</body>
</html>

打开index.html页面显示效果

点击基础设置的页面是

后期在使用过程中，发现iframe有个坑，即在顶级页面，点击跳转到子页面，再点击顶级页面，但是页面显示的是子页面的内容。例如，在上图中的基础设置页面，点击按钮点击切换到test1页面，再点击左边导航基础设置，但是页面显示的是test1.html页面的内容，即无法回到顶级页面基础设置页面，此问题的解决方案是给test1.html添加一个面包屑或者返回按钮。