layer通过父页面调用子页面的方法及属性

Posted 适当的废话

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了layer通过父页面调用子页面的方法及属性相关的知识,希望对你有一定的参考价值。

引言

在使用layer.js的过程中,需要通过layer.open()以iframe的形式打开特定的页面,同时需要用layer的按钮对打开的页面进行提交及重置操作,但是苦于不知如何在父页面调用子页面的方法及属性,查阅大量资料之后终于得出解决方案。

首先

这是layer.open()的代码

layer.open({
      id: ‘insert-form‘,
      type: 2,
      title: ‘录入数据‘,
      shadeClose: true,
      shade: 0.8,
      area: [‘1100px‘, ‘90%‘],
      content: ‘insert.html‘,
      btn: [‘提交‘, ‘重置‘],
      yes: function (index) {
        insertSubmit()
      },
      btn2: function (index) {
        insertReset();
        return false;
      }
    });

  

需要注意的是,必须提供一个id属性,以供之后查找到所需的iframe。

其次:重点

这是调用子页面方法的代码:

 

function insertSubmit(){
    var frameId=document.getElementById(‘insert-form‘).getElementsByTagName("iframe")[0].id;
    $(‘#‘+frameId)[0].contentWindow.mySubmit();
  }


  function insertReset(){
    var frameId=document.getElementById(‘insert-form‘).getElementsByTagName("iframe")[0].id;
    $(‘#‘+frameId)[0].contentWindow.myReset();
  }

  

注意:这段代码是写在父页面中的,即layer所在的页面。

再次

这是子页面(layer中打开的页面)中被调用的方法:

 function mySubmit(){
        $(‘#form‘).submit();
    }


    function myReset(){
        $(‘#form‘)[0].reset();
    }

   原文:http://blog.csdn.net/qq_28550739/article/details/53389588

以上是关于layer通过父页面调用子页面的方法及属性的主要内容,如果未能解决你的问题,请参考以下文章

iframe页面父页面与子页面之间相互进行数据传送及方法调用

layeriframe通过属性id传值

layer弹窗确定按钮:父页面调用子页面

Wex5父子页面方法相互调用

iframe 父页面与子页面之间的方法的相互调用

JS 子页面怎么调用父页面的方法。