iframe实现页中页效果只需两步走

实现步骤

1、target链接目标打开的位置。

2、设置iframe。

效果

点击跳转后

css部分

仅参考

 <style>
        * {
    
    
            padding: 0;
            margin: 0;
        }

        /* 大盒子分左右 */
        .menu {
    
    
            display: flex;
            width: 100%;
        }

        /* 左边 */
        .menu .list_left {
    
    
            width: 200px;
            min-height: 100vh;
            flex-direction: column;
            background-color: cadetblue;
        }

        /* 右边 */
        .menu .centen_right {
    
    
            flex: 1;
        }

        /* 给宽高 */
        iframe {
    
    
            width: 100%;
            height: 100%;
        }
    </style>

HTML部分

<!-- 大盒子 -->
    <div class="menu">
        <!-- 模拟左边列表 -->
        <div class="list_left">
            <ul>
                <!-- 超链接target可以设置目标页面打开的位置,值为iframe的name属性的值 -->
                <li><a href="https://www.baidu.com/" target="centen_frame">百度</a></li>
                <li><a href="https://www.taobao.com/" target="centen_frame">淘宝</a></li>
            </ul>
        </div>
        <!-- 右边 -->
        <div class="centen_right">
            <!-- 这里显示内容的区域 -->
            <!-- name用来a链接跳转的目标点,frameborder规定是否显示框架周围的边框。 -->
            <iframe name="centen_frame" src="https://blog.csdn.net/" frameborder="0"></iframe>
        </div>
    </div>

总结：

1.链接正常使用,可以本页跳转,亦或者项目内不同文件跳转,外链接这些都可以。关键使用target指定在哪里跳转。
2.iframe 元素会创建包含另外一个文档的内联框架（即行内框架）。
3.iframe 最好创建宽高，否则会有横滚动条。