我在页面中使用iframe标签,有的时候就需要两个页面交互

<iframe id="Iframe"  src="{{url('field/user')}}"></iframe>

在父页面中获取子页面内容:

var frameWin = document.getElementsByTagName('iframe')[0].contentWindow;//获取iframe窗口
var framewinFrom = $(frameWin.document).find('#userfrom');//子页面的元素

在子页面中获取父页面:

var parentWin = window.parent;//父窗口
var $parentDoc = $(parentWin.document);//父页面
var $parentBody = $parentDoc.find('body');
var value = $parentBody.find('#user');//父页面的元素

iframe父页面和子页面调用的更多相关文章

  1. Iframe父页面与子页面之间的调用

    原文:Iframe父页面与子页面之间的调用 Iframe父页面与子页面之间的调用 专业词语解释如下:     Iframe:iframe元素是文档中的文档.     window对象: 浏览器会在其打 ...

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

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

  3. Iframe父页面与子页面之间的相互调用

    iframe元素就是文档中的文档. window对象: 浏览器会在其打开一个HTML文档时创建一个对应的window对象.但是,如果一个文档定义了一个或者多个框架(即:包含一个或者多个frame或者i ...

  4. js里父页面与子页面的相互调用

    一.在页面里用 open 打开的子页面: 1.子页面调用父页面的方法,包括子页面给父页面传值: window.opener.methodName(); window.opener.methodName ...

  5. JQuery操作iframe父页面与子页面的元素与方法

    JQuery操作iframe父页面与子页面的元素与方法 JQUERY IFRAME 下面简单使用Jquery来操作iframe的一些记录,这个使用纯JS也可以实现. 第一.在iframe中查找父页面元 ...

  6. ifram父页面、子页面元素及方法的获取调用

    page1 父页面 <div id="ifram" class="parent1"> <iframe frameborder="0& ...

  7. IFrame父页面和子页面的交互

    现在在页面里面用到iframe的情况越来越少了,但有时还是避免不了,甚至这些页面之间还需要用js来做交互,那么这些页面如何操作彼此的dom呢?下面将会逐步介绍. 1.父页面操作子页面里面的dom 下面 ...

  8. iframe父页面与子页面赋值

    最近因为公司之前的系统用iframe,里面的高度不能自适应,导致了很多问题,今天特意拿来研究一下,从网上找了一些方法试验了一下,这里记录一下成功的方法 1.父页面获取子页面的高度,并给父页面赋值 父页 ...

  9. jquery、js调用iframe父窗口与子窗口元素的方法整理

    1. jquery 在iframe子页面获取父页面元素代码如下: $("#objid", parent.document) 2. jquery在父页面 获取iframe子页面的元素 ...

  10. 使用layer 弹出对话框 子父页面相互参数传递 父页面获取子页面参数实例

    一.先看效果: 1.点击三个点的图标弹出了子页面: 2.子页面调用父页面方法,图一调用父页面方法,图二得到父页面var变量.           3.选择之后,关闭弹框,父页面得到子页面单选框选择的v ...

随机推荐

  1. 身份认证功能chiro的使用

    package com.cun;import org.apache.shiro.SecurityUtils;import org.apache.shiro.authc.*;import org.apa ...

  2. HTML之表单

    目录 表单的结构 get方式与post方式 输入 单行文本输入框 提交按钮和重置按钮 密码输入框 复选框 单选按钮 图像按钮 文本选择输入框 隐藏框 多行文本输入框 下拉列表框 新增输入元素 新增其他 ...

  3. 微信小程序-表单笔记

    发布页——向云端数据库上传多行文字和4张图片 第6,8行注释掉和不注释掉都可以实现数据上传 var _this = this; wx.cloud.callFunction({ name: 'searc ...

  4. CSS中字距,词距,首行缩进,字体大小,排版相关问题的探讨

    先说明下,这是在谷歌浏览器下字体显示等问题做个研究,火狐下有点差异,不过火狐占有率低,而且显示的没有谷歌那么合理,不管它先.IE卡的要死,半死不活,也懒得深入研究这些细节,字体排版上不是强迫症,差别也 ...

  5. Python基础:编码规范(4)

    1.命名规范 Python中不同代码元素采用不同命名方式: ◊ 包名:全部小写字母,中间可以由点分隔开.作为命名空间,包名需具有唯一性. ◊ 模块名:全部小写字母,如果是多个单词构成,使用下划线分隔. ...

  6. 2019-04-18 Beetl模板学习

    1. beetl的安装 使用maven: <dependency> <groupId>com.ibeetl</groupId> <artifactId> ...

  7. 2019-04-16 SpringMVC 学习笔记

    1. 配置过程: ① 配置servlet(org.springframework.web.servlet.DiapatcherServlet)拦截请求 ② SpringMVC的默认配置文件:servl ...

  8. spring整合junit进行测试

    以下只是一个模板,大家记得改变配置文件 package cn.itcast.crm.dao; import org.junit.Test; import org.junit.runner.RunWit ...

  9. 定向耦合器 Directional Couplers

    microwave101,干货比较多 传送门:https://www.microwaves101.com/encyclopedias/directional-couplers Directional ...

  10. 关于rocketmq的配置启动

    #集群名称brokerClusterName=rocket-nameserver#broker-a,注意其它两个分别为broker-b和broker-cbrokerName=broker-a#brok ...