web基础之：内联框架iframe的使用

最新推荐文章于 2024-08-03 17:33:50 发布

弃子02

最新推荐文章于 2024-08-03 17:33:50 发布

阅读量2.1k

点赞数

分类专栏： web前端技术文章标签：前端 html5 web

本文链接：https://blog.csdn.net/m0_73749469/article/details/129886246

版权

web前端技术专栏收录该内容

2 篇文章 0 订阅

订阅专栏

内嵌框架(Iframe)用于在HTML中创建一个可加载其他网页的窗口，可以设置高度、宽度，去除边框，并作为链接的目标。文章介绍了Iframe的基本用法，包括设置尺寸、消除边框以及在表格和导航栏中的应用，提供多个实例帮助理解其工作原理。

摘要由CSDN通过智能技术生成

内嵌框架的整体概述

内嵌框架，整体来说就是将整个页面进行了结构划分，在点击一个src或者url时，可以在某个特定的位置跳转页面。（简单来说就是常见的左边导航栏，右边不同的页面跳转栏，这种很常见）
具体一个例子见下图（这里选取w3 school的例子）
在这里插入图片描述

内联框架的入门用法

添加 iframe 的语法

<iframe src="URL"></iframe>

url指向跳转页面的位置

Iframe - 设置高度和宽度

<iframe src="demo_iframe.htm" width="200" height="200"></iframe>

Iframe - 删除边框

<iframe src="demo_iframe.htm" frameborder="0"></iframe>

frameborder 属性规定是否显示 iframe 周围的边框。设置属性值为 “0” 就可以移除边框：

使用 iframe 作为链接的目标

iframe 可用作链接的目标（target）。链接的 target 属性必须引用 iframe 的 name 属性：

<iframe src="demo_iframe.htm" name="iframe_a"></iframe>
<p><a href="http://www.w3school.com.cn" target="iframe_a">W3School.com.cn</a></p>

内联框架的各种类型及实例

整个页面作为内联框架

这种类型的话就相当于是跳转url，只不过是跳转url页面时，类似于将target属性值设置为“_blank”。

简单的内联框架

<body>
   <p>这是一个内嵌框架应用示例。</p>
   <p>正常联网时，你在当前页面的小窗口里会看到搜狐网的主页面。</p>
   <p>点击这里的链接文字<a href="https://y.qq.com/n/ryqq/index.html" target="music">QQ音乐</a>，小窗口里换成了QQ音乐主页面。</p>
   <iframe  src="http://www.sohu.com/" name="music" width="980" height="800" ></iframe>
</body>

这里看到，这是一个最简单的内联框架，只是让你更好的了解内联框架的结构
在这里插入图片描述

利用表格，添加内联框架

例如一个表格（见下图）
在这里插入图片描述
点击不同的搜索栏，旁边就会显示新的目标页面。

表格化的内联框架

<body>
<table width="800" border="1" align="center" >
	<tr width="150" height="100">
		<td width="150" height="50" align="center"><a href="http://www.baidu.com/" 		target="test">百度</a></td>
		<td width="600" height="400" rowspan="4">
		<iframe src="" width="100%" height="100%" name="test"></iframe>
	</tr>
  	<tr>
    		<td height="50" align="center"><a href="http://www.sohu.com/" target="test">搜狐	</a></td>
 	</tr>
  	<tr>
    		<td height="50" align="center"><a href="http://www.sina.com.cn/" target="test">新浪</a></td>
  	</tr>
</table>

这里可以看到，此处是将内联框架放到了表格内部，参考照片见下图
在这里插入图片描述

整个页面直接分块

这里用到的较少，暂不详介。

导航栏类的内联框架

这块部分其实和表格做内联框架有相似之处，只是添加了不少的修饰东西，并且没有了表格的那种约束感（例如最开始提到的w3 school的导航栏）

<table style="width:980px;" border="1" cellspacing="0">
    <tr>
    <td>
        <table style="width:200px; border:1px solid #000000;" cellpadding="3">
        <tr>
        <td><a href="http://www.qdhdworld.com/" target="test">旅游模块——海底世界</a></td>
        </tr>
        <tr>
        <td>
        <span style="font-size:12px;">*参加旅行社注意事项<br>
        *旅游保险常识</span>
        </td>
        </tr>
        <tr>
        <td><a href="http://tsgw.taian.gov.cn/" target="test">旅游景点</a></td>
        </tr>
        <tr>
        <td>
        <span style="font-size:12px;">*广场/建筑<br>
            *纪念展览馆<br>
            *游乐场<br>
            *游泳馆</span></td>
        </tr>
        <tr>
        <td><a href="http://vacations.ctrip.com/?isctrip=T&ouid=vacation" target="test">旅游图库</a></td>
        </tr>
        <tr>
        <td>
        <span style="font-size:12px;">***<br>
        ***<br>
        ***</span>
        </td>
        </tr>
        </table>
    </td>
    <td rowspan="3" style="width:780px; height:300px;">
    <iframe src="http://www.qdhdworld.com/" name="test" width="100%" height="100%"></iframe>
    </td>
    </tr>
</table>