今天和朋友一块讨论，怎样通过js在父页面和子页面之间传值的问题，总结例如以下：

需求描写叙述：父页面有多个子页面。实如今父页面点击子页面，传值到子页面。

看着非常easy，试了好久。主要纠结在怎样获取iframe，刚開始用document.getElementById('iframe的ID'),后来查资料才发现这样的方法仅仅是去取出了一个OBJECT,不能操作它的函数方法。后来改成window.iframes["iframe的name"],这样就能够获取子页面的整个DOM,能够操作它的函数。

1、父页面代码

<html>

<head>

<title></title>

<script type="text/javascript" >

function callChild(){

	var child_1 =window.frames["child"];

	var str = "ddddd";

	child_1.window.testJs(str);

}

function aa(str){

	alert(str);

	}

</script>

</head>

<body>

<iframe name="child" src="children.html" ></iframe>

<a onclick="callChild()">call children</a>

</body>

</html>

2、子页面代码

<html>

<head>

<title></title>

<script type="text/javascript">

	function testJs(str){

		alert(str);

	}

	function callParent(){

		var str = "vdsss";

		parent.aa(str)

	}

	</script>

</head>

<body>

<a onclick="callParent()">call parent</a>

</body>

</html>

js父页面和子页面之间传值的更多相关文章

  1. VUe.js 父组件向子组件中传值及方法

    父组件向子组件中传值 1.  Vue实例可以看做是大的组件,那么在其内部定义的私有组件与这个实例之间就出现了父子组件的对应关系. 2. 父子组件在默认的情况下,子组件是无妨访问到父组件中的数据的,所以 ...

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

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

  3. artdialog4.1.7 中父页面给子页面传值

    artdialog4.1.7中父页面给子页面传值时看了一些网友的解决方法: 在父页面声明全局变量 var returnValue=“ ”,子页面用art.dialog.opener.returnVal ...

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

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

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

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

  6. iframe 框架 父页面与子界面之间的变量、函数、元素获取

    1.获取页面上的iframe 1-1. document.getElementById('iframeId'): 1-2. window.frames[0].window.frames['frameN ...

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

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

  8. layer.open中父页面向子页面传值

    1.咱先看图说话 父list.jsp 子operate.jsp实现的代码1 在父页面上完成对子页面的数据渲染 function setData(data) { var lay=layer.open({ ...

  9. js父页面和子页面相互取值

    iframe子页面与父页面通信根据iframe中src属性是同域链接还是跨域链接,通信方式也不同. 一.同域下父子页面的通信 父页面parent.html <html> <head& ...

随机推荐

  1. S5PV210使用的启动方式

    2017年12月25日1. S5PV210存储配置: +内置64KB NorFlash(上电不需要初始化)(叫IROM 内部外存):用于存储预先设置的BL0; + SoC内置96KB SRAM(上电不 ...

  2. github 丢失的本地提交

    open git bash git reflog git reset xxxxxxx

  3. Tomcat7.0源代码分析——启动与停止服务原理

    前言 熟悉Tomcat的project师们.肯定都知道Tomcat是怎样启动与停止的. 对于startup.sh.startup.bat.shutdown.sh.shutdown.bat等脚本或者批处 ...

  4. BeagleBone Black板第四课：简单LED控制实验

    BBB板第四课:简单LED控制实验 学习BBB板的终于目的是想像单片机一样做控制,但控制思路全然不一样(Linux下控制硬件设备实质就是对相关设备虚拟文件的读写).研究了几天头都大了还是没有进展,网上 ...

  5. DTD 和 Schema简介

    什么是DTD? DTD(文档类型定义)的作用是定义 XML 文档的合法构建模块. 它使用一系列的合法元素来定义文档结构. DTD例子 <?xml version="1.0"? ...

  6. 【Hadoop】Hadoop MR异常处理

    1.代码示例 package com.ares.hadoop.mr.flowsort; import java.io.IOException; import org.apache.hadoop.con ...

  7. SSO单点登录系列3：cas-server端配置认证方式实践(数据源+自定义java类认证)

    落雨 cas 单点登录 本篇将讲解cas-server端的认证方式 1.最简单的认证,用户名和密码一致就登录成功 2.配置Oracle的jdbc数据源,通过spring动态查询数据库 3.配置orac ...

  8. 倍福TwinCAT(贝福Beckhoff)基础教程 松下驱动器如何执行绝对值清零

    点击参数-参数一览,然后修改015为0(设置为绝对编码器方式),点击设定值变更,然后传送,EEP,将参数写入驱动器(保持USB线连接,重启驱动器并确认参数确是改成0了)   监视器-清除多圈数,清除之 ...

  9. 合并apk和odex

    Android的ROM中有很多odex文件,相对于APK中的dex文件而言这个odex有什么作用呢? 如果你仔细观察会发现文件名时一一对应的,同时那些对应的apk文件中没有dex文件.这样做可以使其厂 ...

  10. IIS管理器如何添加网站

    IIS服务器一些步骤 安装好iis后 右击网站按钮点击添加网站 网站名称填写无所谓,物理路径(注意是大路径,一个项目所有的文件在那个文件夹下), Ip地址自己定义最好是hosts文件已经绑定了域名的, ...