天涯论坛

 找回密码
 立即注册
搜索
查看: 75|回复: 5

深入解析HTML5 内联框架--iFrame(附代码)

[复制链接]

2836

主题

316

回帖

9191万

积分

论坛元老

Rank: 8Rank: 8

积分
91919710
发表于 2024-6-30 03:55:39 | 显示全部楼层 |阅读模式

下面博主就为大众带来一篇深入剖析HTML5 内联框架iFrame。期盼大众有所帮忙一块跟随博主过来瞧瞧吧,祝大众游戏愉快哦

因为此刻frame和frameset很少运用已然过时了,已然被p+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 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 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复制内容到剪贴板

程序猿的生活:打造全网web前端全栈资料库(总目录)看完学的更快,把握的更加牢靠,你值得持有连续更新)154 赞同 · 6 评论文案
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>iframe2</title> </head> <body bgcolor="green"> iFrame2 <a 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 frameborder="1">czp_2016のblog</a></body> </html>

貌似各主流网站采用这种布局的,应用范围比较少了。





上一篇:近期百度浏览器 HTML5 跑分跑到全世界第1,是怎么做到的?
下一篇:海象波比浏览器经过综合实力考验,战胜众多浏览器
回复

使用道具 举报

3089

主题

3万

回帖

9909万

积分

论坛元老

Rank: 8Rank: 8

积分
99098770
发表于 2024-9-26 05:21:50 | 显示全部楼层
“沙发”(SF,第一个回帖的人)‌
回复

使用道具 举报

3089

主题

3万

回帖

9909万

积分

论坛元老

Rank: 8Rank: 8

积分
99098770
发表于 2024-10-19 06:50:52 | 显示全部楼层
回顾过去一年,是艰难的一年;展望未来,是辉煌的一年。
回复

使用道具 举报

3047

主题

3万

回帖

9606万

积分

论坛元老

Rank: 8Rank: 8

积分
96065852
发表于 2024-10-20 07:03:48 | 显示全部楼层
你的话深深触动了我,仿佛说出了我心里的声音。
回复

使用道具 举报

3047

主题

3万

回帖

9606万

积分

论坛元老

Rank: 8Rank: 8

积分
96065852
发表于 2024-10-26 01:28:57 | 显示全部楼层
回顾过去一年,是艰难的一年;展望未来,是辉煌的一年。
回复

使用道具 举报

3047

主题

3万

回帖

9606万

积分

论坛元老

Rank: 8Rank: 8

积分
96065852
发表于 2024-10-26 03:52:53 | 显示全部楼层
顶楼主,说得太好了!
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

站点统计|Archiver|手机版|小黑屋|天涯论坛 ( 非经营性网站 )|网站地图

GMT+8, 2024-11-23 09:53 , Processed in 0.159383 second(s), 21 queries .

Powered by Discuz! X3.4

Copyright © 2001-2023, Tencent Cloud.