关于iframe的一些操作记录

本文作为自己对iframe的一个操作总结，做下简单的记录，希望能给大家带来收获，页面使用了jquery（当然iframe要有访问的权限才行，即同源）。

假如index页面包含一个id为 iframe的 iframe,下文中所提及的iframe变量均为dom对象,jQuery对象转dom对象可以使用[0]的方式。

index获取该iframe的方式为

$(“#iframe”);

iframe scr中的页面获取该iframe的方式为

$(parent.document).find(“#iframe”);

index调用iframe的方法,比如show()：

var iframeWindow = $(“#iframe”)[0].contentWindow;
iframeWindow .show();

iframe scr中的页面调用index中的方法,比如show()：

parent.show();

---

下面介绍的是通过获取iframe对象然后操作iframe里页面的一些用法

---

比如一个页面里面显示一个iframe,并让该iframe的documet绑定ajaxComplete事件进行操作

首先要获取到这个iframe,使用jQuery的话必须使用的是该iframe页面的jQuery对象,否则无法绑定该事件;
代码大致如下：
        var currentWindow = iframe.contentWindow; //获取iframe的window对象
        //currentWindow.document 为该iframe的document, $为该iframe window的jQuery对象
        var $iframeDocument = currentWindow.$(currentWindow.document);//获取iframe的jquery document对象
        $iframeDocument.on('ajaxComplete', function(event, xhr, settings) {
            var json = xhr.responseJSON;
            //业务逻辑操作
        });

父页面为iframe绑定函数的方法就是在iframe load时获取其window对象然后currentWindow .methodName = method;即可

$("#iframe").on("load", function() {
    var currentWindow = this.contentWindow;
    currentWindow.show = function() {
        console.log("show~");
    }
})

使用layer打开网页后进行iframe的页面操作,假设该页面是一级页面，非子页面操作（layer调用方法返回的索引值，需要被其对应的layer对象关闭）

var index = layer.open({
        type: 2,
        title: title,
        shadeClose: true,
        shade: false,
        maxmin: true, //开启最大化最小化按钮
        area: ['893px', '600px'],
        content: url,
        success: function(layero){
            //layero 通过打印发现，该对象为layer iframe的父元素
            iframe = $(layero).find("iframe")[0];  //获取对应的iframe
            //业务逻辑操作
            layer.close(index);  //最后关闭layer iframe页面
        }
    });

关于iframe的简单介绍就到此结束啦，欢迎和博主一起讨论哦~