HTML使用iframe元素实现页面内容的跳转功能
用户投稿 学习笔记 17阅读
HTML使用iframe元素实现页面内容的跳转功能 前言一、iframe是什么？二、iframe的使用1.主页面内容代码2.内容页面代码 总结
前言
在前端的学习中，不免有一些页面的跳转功能的实现，而身为初学者的我们没有过快的接触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元素的理解。
如果文章对你有帮助的话，请给我一个小小的点赞一波哦！每个赞和评论都是我编写文章的动力哦！
标签：