前言

在前端的学习中，不免有一些页面的跳转功能的实现，而身为初学者的我们没有过快的接触JavaScript，无法实现动态的页面跳转，所以我在这里使用了一种HTML的元素实现页面元素跳转功能，仅供参考学习。

一、iframe是什么？

irame是 HTML5 中的新增加的属性，所以在HTML5之前的版本是不支持的，作用是文档中的文档，或者浮动的框架。iframe元素会创建包含另外一个文档的内联框架（即行内框架）。可理解为在HTML页面中加入HTML页面，可用于制作简易的页面框架。

二、iframe的使用

1.主页面内容代码

代码如下（示例）：

    <style>
        ul {
            list-style: none;
        }
        ul li {
            width: 30px;
            height: 30px;
            text-align: center;
            margin-bottom: 5px;
            line-height: 30px;
        }
        ul li a {
            text-decoration: none;
            color: #222222;
        }
    </style>
</head>
<body>
<ul>
    <li style="background-color: pink"><a href="b.html" target="d">b</a></li>
    <li style="background-color: aquamarine"><a href="c.html" target="d">c</a></li>
</ul>
<iframe src="b.html" frameborder="0" width="600px" height="400px" scrolling="no" name="d"></iframe>
</body>

在这里插入图片描述

< a >链接中的target属性所指向的目标是d，即iframe框架。（target属性在一些元素中不可用,使用前先了解一下，如：< input >）
iframe元素中frameborder属性规定是否显示框架周围的边框。
iframe元素中scrolling属性规定是否在 iframe 中显示滚动条。
iframe元素中name属性对应的属性值一定要与target属性一致，否则< a >链接无法找到目标框架

2.内容页面代码

b.html代码如下（示例）：

    <style>
        div {
            background-color: pink;
        }
    </style>
</head>
<body>
<div>
    这里是b区的内容
</div>
</body>

c.html代码如下（示例）：

    <style>
        div {
            background-color: aquamarine;
        }
    </style>
</head>
<body>
<div>
    这里是c区的内容
</div>

在这里插入图片描述

点击b或c即可实现页面主要内容的跳转功能

总结

以上就是我对HTML5中iframe元素的使用的理解和整理，iframe元素可作用的地方非常的多，例如在导航栏点击后，页面内容信息的跳转等等，希望大家多多使用，加快对iframe元素的理解。

如果文章对你有帮助的话，请给我一个小小的点赞一波哦！每个赞和评论都是我编写文章的动力哦！

原文链接：https://blog.csdn.net/zxh996/article/details/118390817