Iframe

简介

1.1 iframe控件支持静态和动态的页面url设置。
1.2 支持GET和POST方式加载页面。
1.3 支持iframe高度自适应页面本身高度,不出现纵向滚动条。
1.4 组合了页面加载时的阻塞效果。
1.5 提供onLoad事件。
1.6 支持在iframe内部页面触发iframe自适应高度和任意高度设置。


使用方法

2.1 静态框架使用方法仅EAS7.5版本
<wafctrl:iframe id='iframe_1' name='iframe_1' heightSelfAdaption='true' scrolling='auto'
                src="xxxxx" method='POST' width='100%'
                data="{param1 : 'param1',param2 : 'param2'}" onLoad="afterLoad" >
</wafctrl:iframe>
2.2 JS动态创建EAS8.0+
var options = {
        id:"myiframe",
        src:"https://www.baidu.com",
        height:600,
        width:895
    };
var parentDom = waf("body");
var dom = waf.createDOM("iframe",options);
waf.appendDOM(parentDom,dom);
waf.initComponent("iframe",options,dom);
2.3 通用DOM创建EAS8.0+
<iframe id="myiframe"></iframe>
var options = {
        id:"myiframe",
        src:"https://www.baidu.com",
        height:600,
        width:895
    };
<!--DOM创建好之后,使用js初始化控件-->
waf("#myiframe").wafIframe(options);
2.4 方法&事件使用EAS7.5+
//调用方法
waf("#id").wafIframe('method', parameter...);
//eg:方法调用
$.wafIframe.adapteHeight();//在iframe内部可调用此方法自适应高度
waf("#id").wafIframe("autoAdjustHeight");
waf("#id").wafIframe("getCurIframe");
//eg:更改事件
waf("#id").wafIframe("option","onLoad",fn);

属性说明

id String 缺省值: null 不可以在运行期改变 EAS7.5+

定义iframe的id

name String 缺省值: null 不可以在运行期改变 EAS7.5+

定义iframe的名称,由于当需要post加载url时必须具有名称,因此将名称设为必填

src String 缺省值: null EAS7.5+

iframe内部页面的url

method String 缺省值: “GET” 不可以在运行期改变 EAS7.5+

iframe内部页面的访问方式,GET或POST

data String 缺省值: null 不可以在运行期改变 EAS7.5+

​POST方式下提交到iframe内部页面的json参数(Get方式时此属性无效),如:{filterString:id=xxx}

frameborder String 缺省值: “0” 不可以在运行期改变 EAS7.5+

是否显示框架周围的边框,1-显示、0-不显示

scrolling String 缺省值: “auto” EAS7.5+

是否在iframe中显示滚动条,yes-显示、no-不显示、auto-自动

heightSelfAdaption Boolean 缺省值: true EAS7.5+

iframe是否根据内部页面自适应高度,不出现纵向滚动条

autoLoadBlock Boolean 缺省值: true 不可以在运行期改变 EAS7.5+

iframe内部页面加载时是否显示阻塞效果

height String 缺省值: “100%” EAS7.5+

​框架高度,百分比或者px值

width String 缺省值: “100%” EAS7.5+

框架宽度,百分比或者px值

style String 缺省值: null EAS7.5+

iframe的样式

tagClass String 缺省值: null EAS7.5+

iframe的css类


方法说明

option 参数: (property[,value]) 返回值类型: (任何类型) EAS7.5+

获得或设置文本框某属性的值,当value参数存在时,设置控件的property属性值,且无返回值,否则返回控件的property属性值

  • 参数说明:
        - property: 必要参数,文本框的属性
        - value: 可选参数,文本框的属性值
  • 返回值说明:
        参数没有value时,返回值为相应属性的值,返回值类型为属性对应的类型;参数有value时此方法的作用是设置属性的值,没有返回值。

option 参数: (options) 返回值类型: (undefined) EAS7.5+

对控件多个属性进行一次性设置

  • 参数说明:
        - options: 形式如{property:value[,property1:value1,…]}的json对象,用来描述文本框的属性和相应的值
  • 返回值说明: 无

adapteHeight 参数: (iframeId) 返回值类型: (undefined) EAS7.5+

自适应iframe的高度,提供静态方法是为了方便在iframe内部页面中自适应iframe高度。

  • 参数说明:
        - iframeId: 用于指定iframe的ID,如果不指定此参数则方法尝试自动获取当前页面所在的iframe如:$.wafIframe.adapteHeight()
  • 返回值说明: 无

autoAdjustHeight 参数: (无) 返回值类型: (undefined) EAS7.5+

自适应iframe的高度。

  • 参数说明: 无
  • 返回值说明: 无

setOption 参数: (options) 返回值类型: (undefined) EAS7.5+

设置属性,在iframe内部页面中重新设置iframe的属性,包括src

  • 参数说明:
        - options: iframe属性集合(json形式)iframeId(可选,无默认值)-用于指定iframe的ID,如果不指定此参数则方法尝试自动获取当前页面所在的iframe 如:$.wafIframe.setOption({src:_url,data:_data,method:_method,scrolling:_scrolling})
  • 返回值说明: 无

getCurIframe 参数: (无) 返回值类型: (Object) EAS7.5+

获取当前页面所在的iframe

  • 参数说明: 无
  • 返回值说明: 返回iframe的dom对象

事件说明

onLoad 参数: (e) EAS7.5+

iframe内部页面加载完成后触发

  • 参数说明: 无

样例集合

  1. 综合示例
  2. 手动更新高度
  3. 动态化