深入解析HTML5 内联框架-iFrame（附代码）-天涯论坛

fny5jt9 发表于 2024-6-30 03:55:39

深入解析HTML5 内联框架--iFrame（附代码）

<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">下面<span style="color: black;">博主</span>就为<span style="color: black;">大众</span>带来一篇深入剖析HTML5 内联框架iFrame。<span style="color: black;">期盼</span>对<span style="color: black;">大众</span>有所<span style="color: black;">帮忙</span>。<span style="color: black;">一块</span>跟随<span style="color: black;">博主</span>过来<span style="color: black;">瞧瞧</span>吧，祝<span style="color: black;">大众</span>游戏愉快哦</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">因为</span><span style="color: black;">此刻</span>frame和frameset很少<span style="color: black;">运用</span>，<span style="color: black;">已然</span>过时了，<span style="color: black;">已然</span>被p+CSS代替了，<span style="color: black;">因此</span>，<span style="color: black;">这儿</span>只是举例说明一下，当下还在<span style="color: black;">运用</span>的内联框架iFrame</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">所说</span>的iFrame内联框架，我的理解<span style="color: black;">便是</span>在网页内部嵌套一个网页，并且<span style="color: black;">能够</span>一级一级地嵌套下去。</p>
<div style="color: black; text-align: left; margin-bottom: 10px;"><a style="color: black;"><span style="color: black;"><span style="color: black;">程序猿的生活：前端只<span style="color: black;">必须</span><span style="color: black;">把握</span>这些，你<span style="color: black;">亦</span>能拿8K！（最完整面试题含答案）</span><span style="color: black;">24 赞同 · 2 评论<span style="color: black;"><span style="color: black;">文案</span></span></span></span></a></div>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">示例如下：</p>
<div style="color: black; text-align: left; margin-bottom: 10px;">/*
   示例由index.html和iframe1.html、iframe2.html、iframe3.html<span style="color: black;">构成</span>
   */</div>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">先上一张效果图，<span style="color: black;">照片</span>后面是完整代码。</p>
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic2.zhimg.com/80/v2-31abc7f9556268a89dfbfb581164dd8d_720w.webp" style="width: 50%; margin-bottom: 20px;"></div>
<h2 style="color: black; text-align: left; margin-bottom: 10px;">点击后</h2>
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic2.zhimg.com/80/v2-ec0a83b64e4cbd22bae4ee68d6428831_720w.webp" style="width: 50%; margin-bottom: 20px;"></div>
<h2 style="color: black; text-align: left; margin-bottom: 10px;">完整代码如下</h2>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">index.html</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">XML/HTML Code复制内容到剪贴板</p>
<div style="color: black; text-align: left; margin-bottom: 10px;"><!DOCTYPE html>
   <html lang="en">
   <head>
   <meta charset="UTF-8">
   <title>index</title>
   </head>
   
   index
   <aframeborder="1">czp_2016のblog</a>
   <br/>
   <iframe src="iframe1.html" frameborder="1" width="800px" height="800px"></iframe>
   </html></div>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">iframe1.html</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">XML/HTML Code复制内容到剪贴板</p>
<div style="color: black; text-align: left; margin-bottom: 10px;"><!DOCTYPE html>
   <html lang="en">
   <head>
   <meta charset="UTF-8">
   <title>iframe1</title>
   </head>
   <body bgcolor="red">
   iFrame1
   <aframeborder="1">czp_2016のblog</a>
   <br/>
   <iframe src="iframe2.html" frameborder="0" width="600px" height="600px"></iframe>
   </body>
   </html></div>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">iframe2.html</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">XML/HTML Code复制内容到剪贴板</p>
<div style="color: black; text-align: left; margin-bottom: 10px;"><a style="color: black;"><span style="color: black;"><span style="color: black;">程序猿</span></span></a>的生活：打造全网web前端全栈资料库（总目录）看完学的更快，<span style="color: black;">把握</span>的更加<span style="color: black;">牢靠</span>，你值得<span style="color: black;">持有</span>（<span style="color: black;">连续</span>更新）<span style="color: black;">154 赞同 · 6 评论<span style="color: black;"><span style="color: black;">文案</span></span></span></div>
<div style="color: black; text-align: left; margin-bottom: 10px;"><!DOCTYPE html>
   <html lang="en">
   <head>
   <meta charset="UTF-8">
   <title>iframe2</title>
   </head>
   <body bgcolor="green">
   iFrame2
   <aframeborder="1">czp_2016のblog</a>
   <br />
   <iframe src="iframe3.html" frameborder="0" width="400px" height="400px"></iframe>
   </body>
   </html></div>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">iframe3.html</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">XML/HTML Code复制内容到剪贴板</p>
<div style="color: black; text-align: left; margin-bottom: 10px;"><!DOCTYPE html>
   <html lang="en">
   <head>
   <meta charset="UTF-8">
   <title>iframe3</title>
   </head>
   <body bgcolor="yellow">
   iFrame3
   <aframeborder="1">czp_2016のblog</a></body>
   </html></div>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">貌似各主流网站<span style="color: black;">无</span>采用这种布局的，应用范围<span style="color: black;">亦</span>比较少了。</p>

nqkk58 发表于 2024-9-26 05:21:50

“沙发”（SF，第一个回帖的人）‌

nqkk58 发表于 2024-10-19 06:50:52

回顾过去一年，是艰难的一年；展望未来，是辉煌的一年。

b1gc8v 发表于 2024-10-20 07:03:48

你的话深深触动了我，仿佛说出了我心里的声音。

b1gc8v 发表于 2024-10-26 01:28:57

回顾过去一年，是艰难的一年；展望未来，是辉煌的一年。

b1gc8v 发表于 2024-10-26 03:52:53

顶楼主，说得太好了！

页: [1]

天涯论坛's Archiver

深入解析HTML5 内联框架--iFrame（附代码）