iframe测试

iframe类似于frameset，iframe 和 frameset 都用于html页面的框架布局。(都可用于后台管理界面,iframe放于body标签内，frameset不能放在body标签)

1. <iframe> 标签：iframe 是个内联框架，是在页面里生成个内部框架。

2. <frameset> 标签：frameset 定义一个框架集，包含多个子框架，每个框架都有独立的文档。

 

iframe定义和用法

iframe 元素会创建包含另外一个文档的内联框架（即行内框架）。

1.　　 例子

iframe测试.html(包括三个iframe)

复制代码
<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>iframe测试</title>
    </head>

    <body>

        <iframe src="top.html" width="1360px" name="top" height="200px"></iframe>

        <iframe src="left.html" width="150px" name="left" height="550px"></iframe>

        <iframe src="right.html" width="1160px" height="550px" name="right"></iframe>
    </body>

</html>
复制代码

 

 

top.html

复制代码
<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>

    <body>
        这是顶部
    </body>

</html>
复制代码

 

left.html

复制代码
<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>

    <body >
        这是left的内容！！！
        <br />
        <br />
        <br />
        <br />
        <a href="test.html" target="right">点击在右边显示右边</a>

    </body>

</html>
复制代码

 

right.html

复制代码
<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>

    <body >
        这是right的内容！！！
    </body>

</html>
复制代码

 

效果:

 

 

2.　　点击上边左面的html会在右边显示test.html

test.html

复制代码
<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>

    <body>
        这是test页面(将会在name=right的iframe显示)
    </body>

</html>
复制代码

 效果:

 

posted @   QiaoZhi  阅读(1550)  评论(0)  编辑  收藏  举报
编辑推荐：
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识（上）
· 浏览器原生「磁吸」效果！Anchor Positioning 锚点定位神器解析
· 没有源码，如何修改代码逻辑？
· 一个奇形怪状的面试题：Bean中的CHM要不要加volatile？
阅读排行：
· 分享4款.NET开源、免费、实用的商城系统
· 全程不用写代码，我用AI程序员写了一个飞机大战
· Obsidian + DeepSeek：免费 AI 助力你的知识管理，让你的笔记飞起来！
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· 白话解读 Dapr 1.15：你的「微服务管家」又秀新绝活了
点击右上角即可分享
微信分享提示