今天给各位分享iframe 用法的知识,其中也会对iframe的使用场景有?进行解释,如果能碰巧解决你现在面临的问题,别忘了关注本站,现在开始吧!
在互联网的世界里,各种技术层出不穷,其中iframe技术就是网页开发中的一项重要工具。它能够让我们在网页中嵌入其他网页内容,实现信息的共享和丰富。今天,我们就来聊聊iframe的用法,让你轻松掌握这个网站嵌套的利器。
一、什么是iframe
我们来了解一下什么是iframe。iframe,全称为Inline Frame,是一种HTML标签,它允许我们在网页中嵌入另一个HTML文档。简单来说,就是在一个网页中展示另一个网页的内容。
二、iframe的用法
iframe的用法非常简单,下面我们就来详细介绍一下。
1. 基本用法
在HTML中,使用iframe标签可以实现嵌套其他网页内容的功能。以下是一个简单的示例:
“`html
二、iframe说明
<iframe></iframe>标签用于定义一个页面的内联框架。就是在一个html页面中分出小块,然后用iframe把其他网页嵌入进来,这小块就会显示其他html页面的内容了。
三、iframe标签常用属性
四、父、子页面常用方法
1、父页面
注意:iframe加载也需要时间(相当于重新打开一个页面),需要在父页面操作子页面,要等子页面加载完成,iframe常加上onload事件,jq常加上$(‘#iframeId’).load(function(){});再开始操作子页面。
2、子页面
五、实例
这里也包含了项目中写的常用的公共函数。为了方便js直接嵌入html中。因为jquery很方便,也引入了。
六、替换方法
1、ajax获取页面操作DOM加载。jquery也有提供$(‘divId’).load(‘.html’)直接加载的方法。
2、vue等框架,组件。
HTML <iframe> 标签定义和用法
定义和用法:iframe元素会创建包含另外一个文档的内联框架(即行内框架)。
提示:您可以把需要的文本放置在<iframe>和</iframe>之间,这样就可以应对无法理解 iframe的浏览器。
属性①align
属性值:left、right、top、middle、bottom;
属性的作用:规定如何根据周围的元素来对齐此框架。
属性的说明:不赞成使用该属性。请使用样式代替。
属性②frameborder
属性值:1、0
属性作用:规定是否显示框架周围的边框。
属性③height
属性值:pixels、%
属性作用:规定 iframe的高度。
属性④longdesc
属性值:URL
属性作用:规定一个页面,该页面包含了有关 iframe的较长描述。
属性⑥marginheight
属性值:pixels
属性作用:定义 iframe的顶部和底部的边距。
属性⑦marginwidth
属性值:pixels
属性作用:定义 iframe的左侧和右侧的边距。
属性⑧name
属性值:frame_name
属性作用:规定 iframe的名称。
属性⑨scrolling
属性值:yes、no、auto
属性作用:规定是否在 iframe中显示滚动条。
属性(10)src
属性值:URL
属性作用:规定在 iframe中显示的文档的 URL。
属性(11)width
属性值:pixels、%
属性作用:定义 iframe的宽度。
HTML中iFrame标签有哪些用法
这次给大家带来HTML中iFrame标签有哪些用法,在HTML中iFrame标签用法的注意事项有哪些,下面就是实战案例,一起来看一下。
最近工作有个在项目-布兜收藏夹。简言之就是将喜欢的图片收藏到布兜页面上来,这其中用到了很多关于iframe的方面,总结如下:
1.作为弹出层铺底覆盖
大家如果做过那种黑色遮罩盖住整张页面,而碰巧用户用的是IE6,更碰巧的是页面上有select元素,那就有得头疼了(原理就不在这里赘述了)。我们会发现弹出的DIV没法遮住select,轮到我们的iframe出场了。逻辑如下:
与弹出p同级放入iframe
保证iframe的 z-index小于弹层p z-index
增加window resize和scroll事件,保证iframe能盖住整张页面
部分代码
var iframe= U.isie6()?'<iframe style=”position:absolute;left:0;top:0;z-index:2000000;filter:Alpha(opacity=0); width:100%;height:'+ ds.height+'” frameborder=”0″></iframe>':'';
$container.append(iframe).appendTo($body);2.跨域写入cookie
有 a.com和b.com两个domain。在某些条件下b的部分功能会出现在a页面上。有时需要操作a页面的时候对b.com domain的cookie做一些操作以方便用户下次访问。我们只需要在a页面加入一个iframe(动态或固定)即可,src属性指向b的一张代理页面,在这张页面执行cookie操作即可。
相信看了这些案例你已经掌握了方法,更多精彩请关注Gxl网其它相关文章!
相关阅读:
HTML的代码书写有哪些规范
HTML你一定要知道的优化技巧
XHTML中有哪些常用的标签
文章到此结束,如果本次分享的iframe 用法和iframe的使用场景有?的问题解决了您的问题,那么我们由衷的感到高兴!




