iframe实现页面嵌套，即页面不跳转刷新页面

最新推荐文章于 2026-05-10 16:25:34 发布

原创最新推荐文章于 2026-05-10 16:25:34 发布 · 1w 阅读

24 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#javascript #html

收录于

js 专栏收录该内容

24 篇文章

订阅专栏

本文详细介绍如何使用HTML中的iframe和a标签实现页面内子页面的动态加载与切换，通过实例展示如何设置iframe的基本属性及如何利用a标签的target属性进行页面跳转。

此文转自 https://www.jianshu.com/p/8a006d4ca518
1.在HTML中写入iframe标签

<iframe name="my-iframe" id="my-iframe" src="初始显示的页面或者图片" frameborder="边框（一般为0）" width="宽" height="高" scrolling="是否滚动（一般为“no”）"></iframe>

2.在HTML中写入a标签，当点击a标签时，子页面跳转到所需的页面

<a href="要跳转的页面l"  target="my-iframe">点击我子网页可以跳转到你需要的地方</a>

//注意此处的target一定要和上面的name名字一样

3.如果有多个子页面之间切换，只需要多写几个a标签，并且将它的href换成你所要跳转的html页面即可。切记，target是不变的，和先前的iframe保持一致！！！iframe标签只需要一个。

//写的小案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <iframe id='myIframe' name='myIframe' src='home.html'  frameborder="0" width='200' height='100' scrolling='no'>
    </iframe>
    <div>
        <a href="li1.html" target='myIframe'>点我去li1页面</a>
        <a href="li2.html" target='myIframe'>点我去li2页面</a>
    </div>
</body>
</html>