封装简单iframe插件

来源:互联网 发布:淘宝网什么销量最好 编辑:程序博客网 时间:2024/05/16 11:07

这是一个比较简单的插件的封装,封装的是一个Iframe,其他种类插件也是大概这个意思,只不过是去掉Iframe的内容,往这些函数里面填写你自己的插件的内容。

1、自执行函数的作用是,让这段代码有个块儿级作用域。

2、参数传进一个window的作用是,避免执行插件里面的代码的时候每次都需要找最外层的window。

3、参数传进jQuery的作用是,说明里面的一些方法、符号等是jQuery的,例如:插件里面的$指的是jQuery中的,不是angular等其他框架中的。

4、参数传进undefined的作用是,一些比较老的浏览器不支持undefined,还有一些浏览器可以定义undefined,这样写的目的就是为了兼容这两种情况。

代码如下:

(function  (window,jQuery,undefined {

//构造函数
function getIframe(newSetting){
this.setting={
iframeUrl:"",
iframeId:"",
iframeClass:"",
iframeEle:""
};
this.init(newSetting)
};
//初始化
getIframe.prototype.init=function(newSetting){
$.extend(this.setting,newSetting);
this.create();
};
    //动态创建
getIframe.prototype.create=function(){
   var iframeUrl=this.getUrl();
var iframeId=this.getId();
var iframeClass=this.getClass();
var iframeEle=this.getEle();
var myIframe='<iframe src="'+iframeUrl+'"id="'+iframeId+'"class="'+iframeClass+'"iframe>'
$(iframeEle).append(myIframe)
};
//设置数据
getIframe.prototype.getUrl=function(){
return this.setting.iframeUrl
};
getIframe.prototype.getClass=function(){
return this.setting.iframeClass
};
getIframe.prototype.getId=function(){
return this.setting.iframeId
};
getIframe.prototype.getEle=function(){
return this.setting.iframeEle
};
window.getIframe=getIframe;


})(window,jQuery)

//调用

var newSetting={
            iframeUrl:"https://",
iframeId:"1",
iframeClass:"1",
iframeEle:"body"
};
var newIframe=new getIframe(newSetting);

需要新的功能自己从新在setting中增加参数,然后在下面的原型中添加对应获取参数的方法,然后在动态创建里面添加对应的属性就可以啦!

0 0
原创粉丝点击