深入剖析HTML5 内联框架iFrame
程序员文章站
2023-11-28 22:24:46
下面小编就为大家带来一篇深入剖析HTML5 内联框架iFrame。希望对大家有所帮助。一起跟随小编过来看看吧,祝大家游戏愉快哦... 16-05-04...
由于现在frame和frameset很少使用,已经过时了,已经被div+css代替了,所以,这里只是举例说明一下,当下还在使用的内联框架iframe
所谓的iframe内联框架,我的理解就是在网页内部嵌套一个网页,并且可以一级一级地嵌套下去。
示例如下:
/*
示例由index.html和iframe1.html、iframe2.html、iframe3.html组成
*/
先上一张效果图,图片后面是完整代码。
点击后
完整代码如下
index.html
xml/html code复制内容到剪贴板
- <!doctype html>
- <html lang="en">
- <head>
- <meta charset="utf-8">
- <title>index</title>
- </head>
- <!--注意,这里没有body元素-->
- index
- <a href="http://www.cnblogs.com/czp2016/" frameborder="1">czp_2016のblog</a>
- <br/>
- <iframe src="iframe1.html" frameborder="1" width="800px" height="800px"></iframe>
- </html>
iframe1.html
xml/html code复制内容到剪贴板
- <!doctype html>
- <html lang="en">
- <head>
- <meta charset="utf-8">
- <title>iframe1</title>
- </head>
- <body bgcolor="red">
- iframe1
- <a href="http://www.cnblogs.com/czp2016/" frameborder="1">czp_2016のblog</a>
- <br/>
- <iframe src="iframe2.html" frameborder="0" width="600px" height="600px"></iframe>
- </body>
- </html>
iframe2.html
xml/html code复制内容到剪贴板
- <!doctype html>
- <html lang="en">
- <head>
- <meta charset="utf-8">
- <title>iframe2</title>
- </head>
- <body bgcolor="green">
- iframe2
- <a href="http://www.cnblogs.com/czp2016/" frameborder="1">czp_2016のblog</a>
- <br />
- <iframe src="iframe3.html" frameborder="0" width="400px" height="400px"></iframe>
- </body>
- </html>
iframe3.html
xml/html code复制内容到剪贴板
- <!doctype html>
- <html lang="en">
- <head>
- <meta charset="utf-8">
- <title>iframe3</title>
- </head>
- <body bgcolor="yellow">
- iframe3
- <a href="http://www.cnblogs.com/czp2016/" frameborder="1">czp_2016のblog</a></body>
- </html>
貌似各主流网站没有采用这种布局的,应用范围也比较少了。
以上这篇深入剖析html5 内联框架iframe就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。
原文地址:
上一篇: 微信营销平台系统–刮刮乐的开发
下一篇: PHP面向对象教程之自定义类
推荐阅读
-
深入剖析HTML5 内联框架iFrame
-
深入剖析 RabbitMQ —— Spring 框架下实现 AMQP 高级消息队列协议
-
深入剖析Python的爬虫框架Scrapy的结构与运作流程
-
HTML5实战与剖析之跨文档消息传递(iframe传递信息)
-
深入剖析HTML5 内联框架iFrame
-
spring事务深入剖析 - 事务框架和mybatis如何衔接的
-
深入剖析Python的爬虫框架Scrapy的结构与运作流程
-
深入剖析 RabbitMQ —— Spring 框架下实现 AMQP 高级消息队列协议
-
前端:HTML(三)---页面结构分析,iframe 内联框架,表单语法,单选框 radio,按钮和多选框
-
spring事务深入剖析 - 事务框架