layui iframe弹出层高阶使用

现在假设我们有这样一个弹出层

layer.open({
        type: 2,
        area: ['85%', '890px']
        , id: 'layerDemo' //防止重复弹出
        , content: 'sampleCheck/cellscale.html?v=' + Date.now()
        , btn: ['确定']
        , title: curr.$.i18n.prop("editInformation")
        , btnAlign: 'c'
        , skin: 'scale_padding'
        , shade: 0.8
        , resize: false
        , moveType: true
        , success: function (layero, index) {
            var w = layero.find('iframe')[0].contentWindow;
            var body = layer.getChildFrame('body', index);

            body.find("#currentTaskid").val(currentTask.id);
            body.find("#slide_type").val(currentTask.slide.slide_type);
            body.find("#CTReviewer").text(currentTask.reviewer)
            body.find("#liRedScale").text($("#liRedScale").text())
            body.find("#hyperplasia").text($("#hyperplasia").text())

            body.find("#txt_conclusion").val(currentTask.remark.replace(/nn/g, '\n'))
            body.find("#txt_feature").val(currentTask.feature.replace(/nn/g, '\n'))
        }

现在有个需求，我想在弹出层页面cellscale.html里的内容完全加载完毕后再执行

方案一、使用定时器(虽然能实现，但是无论是后期维护还是性能，都是不值得推荐的)

success: function (layero, index) {
    var w = layero.find('iframe')[0].contentWindow;
    var body = layer.getChildFrame('body', index);

    body.find("#currentTaskid").val(currentTask.id);
    body.find("#slide_type").val(currentTask.slide.slide_type);
    body.find("#CTReviewer").text(currentTask.reviewer)
    body.find("#liRedScale").text($("#liRedScale").text())
    body.find("#hyperplasia").text($("#hyperplasia").text())

    body.find("#txt_conclusion").val(currentTask.remark.replace(/nn/g, '\n'))
    body.find("#txt_feature").val(currentTask.feature.replace(/nn/g, '\n'))

    setTimeout(function() {
        // 延迟执行的代码
    }, 1000); // 毫秒数为延迟时间
}

方案二、通过监听 iframe 的 onload 事件

success: function (layero, index) {
  var body = layer.getChildFrame('body', index);
  var iframe = body.find('iframe');
  iframe.on('load', function() {
    // 执行相关操作
  });
}


//在 iframe 内容加载完毕后触发 onload 事件：
$(document).ready(function() {
  window.parent.$('iframe').trigger('load');
});

通过弹出层页面加载完毕后，触发父页面的监听方法，从而实现。

缺点：仅仅针对某一个事件执行，如果我又多个类似需求，则需要添加复杂的判断或者根本无法完成

方案三、挂载到全局

// 弹出层页面触发名为"customEvent"的自定义事件
$(window).trigger("customEvent");



$(window).on("customEvent", function() {
  // 在这里执行自己的方法
});

这样通过挂载到全局也能实现，并且可以定义多个事件，实现不同的触发，这一点优于方案二。但是大量挂载到全局，仍会造成严重的性能问题

方案四

//父页面
// 定义命名空间
var myNamespace = myNamespace || {};

// 添加方法
myNamespace.method1 = function() {
  console.log('Method 1');
}

myNamespace.method2 = function() {
  console.log('Method 2');
}

//弹出层页面
// 调用父页面的方法
parent.myNamespace.method1();
parent.myNamespace.method2();

这样弥补了方案三的缺点，虽然类似于方案二，但是优于方案二和方案三