引言

在使用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通过父页面调用子页面的方法及属性的更多相关文章

  1. vue组件之间的通信以及如何在父组件中调用子组件的方法和属性

    在Vue中组件实例之间的作用域是孤立的,以为不能直接在子组件上引用父组件的数据,同时父组件也不能直接使用子组件的数据 一.父组件利用props往子组件传输数据 父组件: <div> < ...

  2. 父页面调用子页面js的方法

    iframe子页面调用父页面javascript函数的方法今天遇到一个iframe子页面调用父页面js函数的需求,解决起来很简单,但是在chrome浏览器遇到一点小问题.顺便写一下iframe的父页面 ...

  3. Vue3 父组件调用子组件的方法

    Vue3 父组件调用子组件的方法 // 父组件 <template> <div> 父页面 <son-com ref="sonRef"/> < ...

  4. Vue 父组件调用子组件的方法

    qwq  前两天看了下vue,父子组件方法的调用,怕忘记,所以做个小记录. 一.父组件调用子组件的方法 1.父组件 <template> <div id="rightmen ...

  5. vue+element ui项目总结点(四)零散细节概念巩固如vue父组件调用子组件的方法、拷贝数据、数组置空问题 等

    vue config下面的index.js配置host: '0.0.0.0',共享ip (假设你的电脑启动了这个服务我电脑一样可以启动)-------------------------------- ...

  6. React 父组件调用子组件的方法

    父组件调用子组件的方法 React v16.3.0 及以后版本使用 import React, {Component} from 'react'; export default class Paren ...

  7. layer父页面调用子页面的方法

    由于不知道如何在子页面获取到layer定义的确定按钮,于是就在子页面上定义了一个方法,然后在由父页面在点确定按钮时调用子页面所定义的这个方法,从而执行子页面方法里面的内容: 子页面代码: functi ...

  8. 使用iframe父页面调用子页面和子页面调用父页面的元素与方法

    在实际的项目开发中,iframe框架经常使用,主要用于引入其他的页面.下面主要介绍一下使用iframe引入其他页面后,父页面如何调用子页面的方法和元素以及子页面如何调用父页面的方法和元素. 1.父页面 ...

  9. layer父界面调用子弹窗的方法和获取子弹窗的元素值总结

    layer.open({ type: 2 ,title: false //不显示标题栏 ,closeBtn: false ,area: ['460px', '45%'] ,shade: 0.5 ,id ...

随机推荐

  1. 定制xfce4桌面==排除appfinder的綑绑

    如下等同于安装 xfce4-meta,除了不安装 app-finder emerge -avq xfwm4 xfdesktop xfce4-session xfce4-settings xfce4-t ...

  2. Daily Life——团队冲刺博客——(领航篇)

    目录 领航目标 各个成员在 Alpha 阶段认领的任务 各个成员的具体任务安排 整个项目预期的任务量 团队成员贡献值的计算规则 燃尽图 Daily Life团队冲刺博客 领航目标 各个成员在 Alph ...

  3. Java并发AtomicBoolean类~

    java.util.concurrent.atomic.AtomicBoolean类提供了可以原子读取和写入的底层布尔值的操作,并且还包含高级原子操作. AtomicBoolean支持基础布尔变量上的 ...

  4. 首次使用Git将码云上的代码Clone至本地

    使用Git将码云上的代码Clone至本地 1. 安装Git https://git-scm.com/book/zh/v2/%E8%B5%B7%E6%AD%A5-%E5%AE%89%E8%A3%85-G ...

  5. Cocos2d-x之UI控件简介

    |   版权声明:本文为博主原创文章,未经博主允许不得转载. 在Cocos2d-x中提供了一种UI控件,UI控件是指用户交互界面的操作部件.UI控件可以是Button(按钮),CheckBox(选择框 ...

  6. 【Python—windows 下 virtualEnv 使用】

    用pip安装virtualenv pip3 install virtualenv 在相应的文件夹中创建一个独立的Python运行环境,命名为env. 之后会自动创建一个 env 文件夹,有: Incl ...

  7. leetcode.排序.347前k个高频元素-Java

    1. 具体题目 给定一个非空的整数数组,返回其中出现频率前 k 高的元素. 示例 1: 输入: nums = [1,1,1,2,2,3], k = 2 输出: [1,2] 示例 2: 输入: nums ...

  8. ORM:Chloe

    ORM的一种:Chloe注意实体类模板特色:多表连接 利用chloe实现对各表的增删查改的管理,判断现有物料是否能够支持生产规模. 一开始报错: IQuery<ProductionPlans&g ...

  9. c# 编程--方法(函数)

    方法(函数) 能够独立完成某项功能的模块    函数的四要素:函数名.输入.输出.函数体    函数定义.函数的调用 函数就是将一堆代码进行重用的一种机制,函数就是一段代码,这段代码可能有输入的值(参 ...

  10. Python自动补全缩写意义

    自动补全的变量的类别p:parameter 参数 m:method 方法(类实例方法)调用方式classA aa.method()或者classA().method() c:class 类 v:var ...