首页 前端知识 web基础之:内联框架iframe的使用

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

2024-08-22 23:08:05 前端知识 前端哥 758 646 我要收藏

内嵌框架Iframe的应用

  • 内嵌框架的整体概述
  • 内联框架的入门用法
    • 添加 iframe 的语法
    • Iframe - 设置高度和宽度
    • Iframe - 删除边框
    • 使用 iframe 作为链接的目标
  • 内联框架的各种类型及实例
    • 整个页面作为内联框架
      • 简单的内联框架
    • 利用表格,添加内联框架
      • 表格化的内联框架
    • 整个页面直接分块
      • 导航栏类的内联框架
  • 总结

内嵌框架的整体概述

内嵌框架,整体来说就是将整个页面进行了结构划分,在点击一个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>

具体效果详见下图
在这里插入图片描述

总结

iframe内联框架的有效使用,可以使得所做的网页更加美观且有层次,感兴趣得小伙伴赶快试试吧.

转载请注明出处或者链接地址:https://www.qianduange.cn//article/16529.html
标签
评论
发布的文章

【Jquery】jquery的简单使用

2024-09-01 00:09:11

NodeJs使用jQuery中$Ajax

2024-09-01 00:09:45

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!