iframe深度理解
来源:互联网 发布:河南教师网络研修社区 编辑:程序博客网 时间:2024/06/04 18:00
前言
如果你的页面是一个后台管理页面,那么你一定对iframe不陌生。从h5定稿开始,在涉及框架引入页面时,统一建议使用iframe来进行相关的资源嵌入。
使用场景
1、通常在不希望整体页面跳转,只需要主体页面跳转,则需要加入iframe标签来作为展示页面的窗口,通常在管理后台 、qq邮箱等管理界面应用比较多。
2、iframe 的属性中有src以及name属性 ,通过这两个属性可以搭配a标签实现第一条的需求,name是a连接target属性的指向地址,而src的地址可以通过a的href来改变
基本属性
1、src 属性 指向该框架链接的页面地址,可以为相对请求地址,也可以为绝对地址,也可以为外网地址,当为不同服务器项目涉及跨域时,控制台会报错,但不会影响正常的显示2、name 大多数标签都有的自带属性,在input中为特殊含义 指代数据项的类型,而在iframe中可以用来当做目标3、frameborder 框架的边框可以用cssborder 代替4、width 一般由展示的空间决定宽度 ,height一般由载入页面的高度确定5、scrolling :auto yes no ,也可以用css 的overflow 的相关属性来控制
iframe获取子页面的高度
- 通常用于正确设置嵌入页的高度,一般情况下要设置展示嵌入页为固定大小的。
//父页面载入获取高度 标签内事件 : onload="this.height=this.contentWindow.document.documentElement.scrollHeight"js脚本通用事件$( "iframe").load( function () { $(this).height($(this).contents().find( "body" ).height() + 30 );})//子页面载入之后 改变高度 var htmlHeight=$("body").height()+30;$("#iframe", window.parent.document).height(htmlHeight);
父子页面元素的获取
- 父页面以及子页面位置的元素获取
// 父页面获取子页面的元素 $("#iframe").contents().find("#body")//子页面获取父页面的元素$(window.parent.document).find("#iframe")
0 0
- iframe深度理解
- 深入理解iframe
- 深入理解iframe
- 深入理解iframe
- 深入理解iframe
- 活动对象深度理解
- 深度理解依赖注入
- 堆栈的深度理解
- java深度理解注解
- Spark SQL深度理解
- 深度学习初步理解
- 堆栈的深度理解
- 深度理解图像处理
- 堆栈的深度理解
- 深度理解IOC
- 深度理解TLB机制
- autorelease深度理解
- Android WebView深度理解
- centos 没有netstat 命令问题
- IOS网络请求Get,Post请求差异及用法
- 分别用Shell和Python遍历查询Hdfs文件路径
- 三维点比较大小
- Swift-服务器返回的数据类型的坑。
- iframe深度理解
- bootstrapTable 举例2
- 生成git所需的 SSH Key
- 2017机器人&人工智能产业发展论坛即将于6月召开!
- 数据库使用心得
- jQuery EasyUI DataGrid Checkbox 数据设定与取值
- mininet下sflow监控流量
- windows 7下快速搭建Node.js开发环境
- feOffset element | SVGFEOffsetElement object