什么是iframe及作用是什么? |
您所在的位置:网站首页 › doyoukissme什么意思 › 什么是iframe及作用是什么? |
一. iframe是什么及作用
iframe是嵌入式框架, 是html标签, 还是一个内联元素, iframe 元素会创建包含另外一个文档的内联框架(即行内框架) . 说白了, iframe用来在页面嵌入其他页面. 通常我们使用iframe直接直接在页面嵌套iframe标签指定src就可以了。 二. iframe的优缺点优点: 1. 页面和程序分离,几乎不会受到外界任何js或者css的影响, 便于使用 2. 可以通过iframe嵌套通用的页面, 提高代码的重用率, 比如页面的头部样式和底部版权信息 3. 重新加载页面时, 不需要重载iframe框架页的内容, 增加页面重载速度. 4. iframe可以解决第三方内容加载缓慢的问题.
缺点: 1. 会产生很多页面,不容易管理 2. iframe框架的内容无法被搜索引擎捕获, 所以iframe不适用于首页 3. iframe兼容性较差 4. iframe有一定的安全风险 5. iframe会阻塞主页面的Onload事件 三. 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是内嵌的网页元素 四.iframe中还可以设置些什么属性 iframe常用属性: 1.frameborder:是否显示边框,1(yes),0(no) 2.height:框架作为一个普通元素的高度,建议在使用css设置。 3.width:框架作为一个普通元素的宽度,建议使用css设置。 4.name:框架的名称,window.frames[name]时专用的属性。 5.scrolling:框架的是否滚动。yes,no,auto。 6.src:内框架的地址,可以使页面地址,也可以是图片的地址。 7.srcdoc , 用来替代原来HTML body里面的内容。但是IE不支持, 不过也没什么卵用 8.sandbox: 对iframe进行一些列限制,IE10+支持
五.同域和跨域 我们通常使用iframe最基本的特性,就是能自由操作iframe和父框架的内容(DOM). 但前提条件是同域. 如果跨域顶多只能实现页面跳转window.location.href. 那什么是同域/ 什么是跨域呢?就是判断你的url首部是否一样 同域不同域的问题: A: B:使用A时,因为同域,父页面可以对子页面进行改写,反之亦然。使用B时,不同域,父页面没有权限改动子页面,但可以实现页面的跳转这里,我们先从简单的开始,当主页面和iframe同域时,我们可以干 些什么。 六.获取iframe里的内容主要的两个API就是contentWindow,和contentDocumentiframe.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获取. Your browser does not support iframes. console.log(window.frames['ifr1'].window); console.dir(document.getElementById("ifr1").contentWindow);七.在iframe中获取父级内容 同理,在同域下,父页面可以获取子iframe的内容,那么子iframe同样也能操作父页面内容。在iframe中,可以通过在window上挂载的几个API进行获取. window.parent 获取上一级的window对象,如果还是iframe则是该iframe的window对象 window.top 获取最顶级容器的window对象,即,就是你打开页面的文档 window.self 返回自身window的引用。可以理解 window===window.self(脑残)八. iframe属性分析1 align (HTML5 不支持。HTML 4.01 已废弃。) 规定 相对于周围元素的对齐方式, 属性值有 top, right, bottom, left, middle
2 frameborder (HTML5不支持) 规定是否显示 周围的边框. //不显示边框 //显示边框
3 marginheight (HTML5 不支持) 规定 的顶部和底部的边距。其实可以理解为iframe的上下内边距, 并且这个属性不会增加iframe的高度, 超出默认显示滚动条
4 marginwidth(HTML5 不支持) 同上, iframe左右内边距, 不影响宽度, 超出显示滚动条
5 scrolling(HTML5 不支持) 是否显示滚动条 //默认值, 内容超出显示 //始终显示 //始终不显示
6 width height(HTML5支持) 的宽高, 属性值可以是固定值, 也可以是百分比(父类容器百分比)
7 name (HTML5支持) 规定 的名称。 在 XHTML 中,name 属性已废弃,并将被移除。使用 id 属性代替。
8 src (HTML5支持) iframe显示的内容地址
9 sandbox(HTML5新特性) 额外的限制, HTML 5通过sandbox属性提升的安全性。sandbox属性可以防止不信任的Web页面执行某些操作。sandbox它可以防止如下操作 访问父页面的DOM(从技术角度来说,这是因为相对于父页面iframe已经成为不同的源了) 执行脚本 通过脚本嵌入自己的表单或是操纵表单 对cookie、本地存储或本地SQL数据库的读写
//属性值空字符串 限制上述所有操作 //允许表单提交 //允许脚本执行 //允许将内容作为普通来源对待。如果未使用该关键字,嵌入的内容将被视为一个独立的源。 //嵌入页面的上下文可以导航(加载)内容到顶级的浏览上下文环境(browsing context). 如果未使用该关键字,这个操作不可用。
九.iframe自适应 默认情况下,iframe会自带滚动条,不会全屏.如果你想自适应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看个例子: 你可以直接写在内联里面,也可以在css里面定义,不过对于广告iframe来说,样式写在属性中,是best pratice. |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |