iframe如何使用

最新推荐文章于 2024-02-04 15:50:50 发布

sslcsq

最新推荐文章于 2024-02-04 15:50:50 发布

阅读量512

点赞数 2

文章标签： iframe html

本文链接：https://blog.csdn.net/sslcsq/article/details/107837357

版权

iframe是HTML <iframe></iframe> 标签
所有浏览器都支持 <iframe> 标签。
IE Firefox Chrome Safari Opera ...
可以理解iframe就是路由的前身，iframe是在当前页面打开另一个页面，类似于路由跳转~
如何使用
index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        .content{
            width: 100%;
            height: 100%;
            display: flex;
        }
        .box{
            width: 10%;
            height: 100%;
        }
        .box>ul>li{
            height: 40px;
            text-align: center;
            line-height: 40px;
        }
        .box>ul>li>a{
            color: #222;
        }
        .box1{
            width: 90%;
            height: 1000px;
            background: red;
        }
    </style>
</head>
<body>
    <div class="content">
        <div class="box">
            <ul>
                <li>
                    <a href="1.html" target="iframe1">首页</a>
                </li>
                <li>
                    <a href="2.html" target="iframe1">用户信息</a>
                </li>
                <li>
                    <a href="3.html" target="iframe1">详情信息</a>
                </li>
                <li>
                    <a href="4.html" target="iframe1">关于我们</a>
                </li>
            </ul>
        </div>
        <div class="box1">
            <iframe name="iframe1" 
                    id="iframe1" 
                    src="1.html"    // 这个是默认显示的一个页面 也就是1.html
                    frameborder="0"   // 这个是 iframe 的边框  设置 0 去掉
                    width="100%"  //宽度
                    height="100%" // 高度
                >
            </iframe>
        </div>
    </div>
</body>
</html>

当前这个index.html文件里面的内容可以大致这样理解:
1.li中的a标签中的href就相当于vue中的<router-link to=''>
2.iframe标签就相当于vue中的<router-view>
注：
1.html 、2.html 、3.html 、4.html 自己新建一下随便写点内容回到index.html中运行看效果
这样就实现了页面跳转(在本页面类似hash、history不过他是跳转的html文件)而不是像window.open打开一个新页面。
很老的一个技术了，现在基本上用的很少，不过有些公司前端再用，像我这种写着玩的，那就随便用~

sslcsq

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
iframe如何使用

iframe是HTML <iframe></iframe> 标签所有浏览器都支持 <iframe> 标签。IE Firefox Chrome Safari Opera ...可以理解iframe就是路由的前身，iframe是在当前页面打开另一个页面，类似于路由跳转~如何使用index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8
复制链接

扫一扫