首页 > 其他分享 >什么是iframe及作用是什么?

什么是iframe及作用是什么?

时间:2023-01-09 22:44:06浏览次数:28  
标签:什么 window HTML5 iframe 属性 frame 作用 页面

1:iframe的概念以及作用


iframe是嵌入式框架, 是html标签, 还是一个内联元素, iframe 元素会创建包含另外一个文档的内联框架(即行内框架) . 说白了, iframe用来在页面嵌入其他页面.

通常我们使用iframe直接直接在页面嵌套iframe标签指定src就可以了。

<iframe src="demo_iframe.html"></iframe>

 

2:iframe的优缺点

优点:

1. 页面和程序分离,几乎不会受到外界任何js或者css的影响, 便于使用

2. 可以通过iframe嵌套通用的页面, 提高代码的重用率, 比如页面的头部样式和底部版权信息

3. 重新加载页面时, 不需要重载iframe框架页的内容, 增加页面重载速度.

4. iframe可以解决第三方内容加载缓慢的问题.

缺点:

1. 会产生很多页面,不容易管理

2. iframe框架的内容无法被搜索引擎捕获, 所以iframe不适用于首页

3. iframe兼容性较差

4. iframe有一定的安全风险

5. iframe会阻塞主页面的Onload事件

 

3:iframe和老版本的frame的区别


1. frame不能脱离frameSet单独使用,iframe可以

2. frame不能放在body中, iframe可以

3. 嵌套在frameSet中的iframe必需放在body中

4. frame的高度只能通过frameSet控制;iframe可以自己控制,不能通过frameSet控制

5. iframe 可以在表格中使用, frame 则不行

6. HTML5支持iframe, 不支持frame

7. frame几乎废弃, iframe老当益壮

8. frame和iframe实现功能基本相同, 不过iframe更灵活. frame是整个页面的框架, iframe是内嵌的网页元素

 

4:iframe的一些属性


.frameborder:是否显示边框,1(yes),0(no)
.height:框架作为一个普通元素的高度,建议在使用css设置。
width:框架作为一个普通元素的宽度,建议使用css设置。
name:框架的名称,window.frames[name]时专用的属性。
.scrolling:框架的是否滚动。yes,no,auto。
.src:内框架的地址,可以使页面地址,也可以是图片的地址。
.srcdoc , 用来替代原来HTML body里面的内容。但是IE不支持, 不过也没什么卵用
.sandbox: 对iframe进行一些列限制,IE10+支持\


5:获取iframe里的内容


主要的两个API就是contentWindow,和contentDocument
iframe.contentWindow, 获取iframe的window对象
iframe.contentDocument, 获取iframe的document对象
这两个API只是DOM节点提供的方式(即getELement系列对象)

var iframe = document.getElementById("iframe1");
var iwindow = iframe.contentWindow;
var idoc = iwindow.document;
console.log("window",iwindow);//获取iframe的window对象
console.log("document",idoc); //获取iframe的document
console.log("html",idoc.documentElement);//获取iframe的html
console.log("head",idoc.head); //获取head
console.log("body",idoc.body); //获取body

 


另外更简单的方式是,结合Name属性,通过window提供的frames获取.

<iframe src ="/index.html" id="ifr1" name="ifr1" scrolling="yes">
<p>Your browser does not support iframes.</p>
</iframe>
<script type="text/javascript">
console.log(window.frames['ifr1'].window);
console.dir(document.getElementById("ifr1").contentWindow);
</script>

 

6:在iframe中获取父级内容


同理,在同域下,父页面可以获取子iframe的内容,那么子iframe同样也能操作父页面内容。在iframe中,可以通过在window上挂载的几个API进行获取.

window.parent 获取上一级的window对象,如果还是iframe则是该iframe的window对象
window.top 获取最顶级容器的window对象,即,就是你打开页面的文档
window.self 返回自身window的引用。可以理解 window===window.self

 


7:iframe属性分析
1 align (HTML5 不支持。HTML 4.01 已废弃。)

规定 <iframe> 相对于周围元素的对齐方式, 属性值有 top, right, bottom, left, middle

<iframe align = "top"> </iframe>

 

2 frameborder (HTML5不支持)

规定是否显示 <iframe> 周围的边框.

<iframe frameborder = "0"></iframe> //不显示边框

<iframe frameborder = "1"></iframe> //显示边框

3 marginheight (HTML5 不支持)

规定 <iframe> 的顶部和底部的边距。其实可以理解为iframe的上下内边距, 并且这个属性不会增加iframe的高度, 超出默认显示滚动条

<iframe marginheight="10"></iframe>

 

4 marginwidth(HTML5 不支持)

同上, iframe左右内边距, 不影响宽度, 超出显示滚动条

5 scrolling(HTML5 不支持)

是否显示滚动条

<iframe scrolling="auto"></iframe> //默认值, 内容超出显示

<iframe scrolling="yes"></iframe> //始终显示

<iframe scrolling="no"></iframe> //始终不显示

 

6 width height(HTML5支持)

<iframe>的宽高, 属性值可以是固定值, 也可以是百分比(父类容器百分比)

<iframe width = "100%" height = "200"></iframe>

 

7 name (HTML5支持)

规定 <iframe> 的名称。

在 XHTML 中,name 属性已废弃,并将被移除。使用 id 属性代替。

<iframe name="helloworld"></iframe>

 

8 src (HTML5支持)

iframe显示的内容地址

<iframe src="www.baidu.com"></iframe>

 

9 sandbox(HTML5新特性)

额外的限制, HTML 5通过sandbox属性提升<iframe>的安全性。sandbox属性可以防止不信任的Web页面执行某些操作。sandbox它可以防止如下操作

访问父页面的DOM(从技术角度来说,这是因为相对于父页面iframe已经成为不同的源了)

执行脚本

通过脚本嵌入自己的表单或是操纵表单

对cookie、本地存储或本地SQL数据库的读写

 

<iframe sandbox = ""></iframe> //属性值空字符串 限制上述所有操作

<iframe sandbox = "allow-forms"></iframe> //允许表单提交

<iframe sandbox = "allow-scripts"></iframe> //允许脚本执行

<iframe sandbox = "allow-same-origin"></iframe> //允许将内容作为普通来源对待。如果未使用该关键字,嵌入的内容将被视为一个独立的源。

<iframe sandbox = "allow-top-navigation"></iframe> //嵌入页面的上下文可以导航(加载)内容到顶级的浏览上下文环境(browsing context). 如果未使用该关键字,这个操作不可用。

 

8:iframe自适应

默认情况下,iframe会自带滚动条,不会全屏.如果你想自适应iframe的话:第一步:去掉滚动条

<iframe src="./iframe1.html" id="iframe1" scrolling="no"></iframe>

第二步,设置iframe的高为body的高

var iwindow = iframe.contentWindow;
var idoc = iwindow.document;
iframe.height = idoc.body.offsetHeight

另外,还可以添加其它的装饰属性:

属性效果
allowtransparency true or false
是否允许iframe设置为透明,默认为false
allowfullscreen true or false
是否允许iframe全屏,默认为false

标签:什么,window,HTML5,iframe,属性,frame,作用,页面
From: https://www.cnblogs.com/z-bky/p/17038749.html

相关文章

  • 为什么开发人员在工作中感到陷入困境
    编码是有创意的。企业生活往往不是。业务需求和您的创意愿望之间存在着矛盾。作为一名开发人员,我常常觉得公司的工作让人不知所措。在工作中感到受困是完全正常的。很少......
  • linux中cp-a和cp-r的区别是什么
    原文地址:http://net.sanhaostreet.com/it/202203/1513250.htmlinux中cp-a和cp-r的区别是什么Linuxcp(英文全拼:copyfile)命令主要用于复制文件或目录。语法cp[options]......
  • 1.1-1.7 什么爬虫,爬虫的分类
     -----------------------------------------------------------------------------------------------------------------------------------------------------------......
  • 有什么好用的云渲染平台?如何选择?
    在CG制作流程中,离线渲染一直是必要且耗时的环节。你的场景越复杂,渲染出现问题的可能性就越大,尤其是当你独自工作,没有人给你建议的时候,灯光、模型、场景任何一个环节渲染时......
  • 伪元素和伪类的区别和作用
    1.伪类是通过在元素选择器上加⼊伪类改变元素状态,⽽伪元素通过对元素的操作进⾏对元素的改变。(伪类针对的是元素状态、伪元素针对的是元素本身)(1)伪元素:在内容元素的前后插......
  • 调用CAD快捷键和命令时为什么会提示未知命令?
    CAD设计过程中,为了提高绘图效率,少不了要用到各种常用的CAD快捷键和命令,可是为什么在调用某些常用CAD快捷键和命令时会提示未知命令呢?下面就和小编一起来看看吧!1、部分命令......
  • #百人创作先锋团#自动驾驶最核心的技术是什么?
    结论先行:自动驾驶车辆核心技术为环境感知、路径规划、精确定位、线控执行,其中环境感知是所有关键技术的数据基石。:::hljs-center:::自动驾驶车辆核心技术为:环境感知、......
  • 前端调试是什么?方法技巧。前端调试要做什么?看视频记笔记
    转 ----- 前端调试方法与技巧m0_45127388于2021-11-1212:03:42发布3183收藏20分类专栏:基础文章标签:前端html5html版权基础专栏收录该内容28篇文章0订......
  • 转 什么是promise?
    转  请求被pending,pending是什么意思?且随疾风前行_go已于2022-07-0811:55:26修改29818收藏11文章标签:pending请求pending请求挂起请求卡住版权在ChromeDe......
  • 虚拟数字人制作有哪些用途?可以用来干什么?
    在数字经济、数字生活、数字城市与元宇宙的背景下,数字人作为数字内容的核心,慢慢进入到人们的视野。目前看来,企业员工、娱乐明星、带货主播,各行各业都出现了虚拟数字人。例......