网页子窗口iframe的用法

最新推荐文章于 2024-09-11 21:57:53 发布

三生梅雨渡潇潇

最新推荐文章于 2024-09-11 21:57:53 发布

阅读量567

点赞数

分类专栏：博客笔记文章标签： css html5 html css3

本文链接：https://blog.csdn.net/qq_43435403/article/details/107927030

版权

博客同时被 2 个专栏收录

61 篇文章 1 订阅

订阅专栏

笔记

21 篇文章 0 订阅

订阅专栏

对于网页子窗口iframe的相关介绍，可参考以下链接：

W3school中对iframe的介绍

接下来看看iframe的用法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        iframe{
            width: 800px;
            height: 500px;
        }
    </style>
</head>
<body>
<h1>百度</h1>

<iframe name="abc"src="http://www.baidu.com" frameborder="1"></iframe>

</body>
</html>

以下是效果图：
这是效果图

iframe是跨域显示网页，即在当前iframe页面里显示其他的页面。

iframe和a标签还可以建立关系，一起使用，这时需要设置两个值：

1、iframe设置name属性

2、a标签设置target属性

具体代码可参考下面：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        iframe{
            width: 800px;
            height: 500px;
        }
    </style>
</head>
<body>
<h1>百度</h1>

<nav>
    <ul>
<!--        实现iframe页面跳转需要用到a标签-->
        <li><a href="day03-form.html">a页面</a></li>
<!--        day03-form.html    是我电脑上的一个页面文件-->
        <li>b页面</li>
        <li><a href="http://www.baidu.com" target="abc">百度页面</a></li>
    </ul>
</nav>

<iframe name="abc"src="http://www.baidu.com" frameborder="1"></iframe>


</body>
</html>