html中iframe显示多个子页面

最新推荐文章于 2023-08-03 14:08:50 发布

水星灭绝

最新推荐文章于 2023-08-03 14:08:50 发布

阅读量4.5k

点赞数 3

分类专栏： h5 前端

本文链接：https://blog.csdn.net/wulong710/article/details/108623639

版权

前端同时被 2 个专栏收录

137 篇文章 0 订阅

订阅专栏

121 篇文章 3 订阅

订阅专栏

html中iframe显示多个子页面

参考：https://www.runoob.com/html/html-iframes.html

go.html

<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="content-type" content="charset=utf-8; text/html" />
  <title>显示框架</title>
  <base href="" target="_blank">
</head>

<body>

  <div id="container" style="width: 800px;">
    <div id="d1" style="background-color:aquamarine;float: left;">
      <iframe src="http://sina.com" target="_blank" width="200" height="300" frameborder="0" name="ifa"></iframe>
      <p><a href="sec.html" target="ifa">点击跳转</a></p>
    </div>
  
    <div id="d2" style="background-color: beige;float: left;">
      <iframe src="http://163.com" width="400" height="300" name="ifb"></iframe>
      <p><a href="show.html" target="ifb">跳转到二</a></p>
    </div>
  </div>

</body>

</html>

show.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>一首诗</title>
</head>

<body>
    <pre>
        疾风知劲草，版当时诚臣。
        至今思项羽，不肯过江东。
    </pre>
</body>

</html>

sec.html

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
        <title>第二个</title>

    </head>


    <body>
        <pre>显示第二个界面
        <b>我是李先念</b>    
        </pre>
    </body>
</html>

结果：

点击跳转链接按钮

水星灭绝

关注

3
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
html中iframe显示多个子页面

html中iframe显示多个子页面参考：https://www.runoob.com/html/html-iframes.htmlgo.html<!DOCTYPE html><html><head> <meta http-equiv="content-type" content="charset=utf-8; text/html" /> <title>显示框架</title> <base href
复制链接

扫一扫

专栏目录