今天和朋友一块讨论，怎样通过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. Android基于代理的插件化思路分析

    前言 正常的App开发流程基本上是这样的:开发功能-->测试--->上线,上线后发现有大bug,紧急修复---->发新版本---->用户更新----->bug修复.从发现 ...

  2. 了解Linux实时内核

    了解Xenomai过程中,对现阶段的RTOS进行总结如下: 把现阶段的RTOS分成两个阵营: 非Linux阵营:VxWorks,RTEMS Linux阵营 :RT-linux,Preempt-rt,W ...

  3. 常见java异常

    1. java.lang.NullPointerException(空指针异常)  调用了未经初始化的对象或者是不存在的对象 经常出现在创建图片,调用数组这些操作中,比如图片未经初始化,或者图片创建时 ...

  4. 机器学习算法实践：朴素贝叶斯 (Naive Bayes)（转载）

    前言 上一篇<机器学习算法实践:决策树 (Decision Tree)>总结了决策树的实现,本文中我将一步步实现一个朴素贝叶斯分类器,并采用SMS垃圾短信语料库中的数据进行模型训练,对垃圾 ...

  5. 大量数据更新导致fgc频繁引起jvm服务暂停。

    线上跑的几台server突然出现大量fgc,因为在fgc过程的stop the world太久.引起其他应用訪问该server上的接口大量超时.(发生超时的时间点和fgc时间点一致) 先进行初步的优化 ...

  6. 介绍下Shell中的${}、##和%%使用范例

    假设定义了一个变量为:代码如下:file=/dir1/dir2/dir3/my.file.txt可以用${ }分别替换得到不同的值:${file#*/}:删掉第一个 / 及其左边的字符串:dir1/d ...

  7. Linux SSH和SFTP服务分离

    Linux SSH和SFTP服务分离 学习了:https://www.cnblogs.com/zihanxing/articles/5665383.html 都是监听22端口:

  8. Elasticsearch教程（三），IK分词器安装 （极速版）

    如果只想快速安装IK,本教程管用.下面看经过. 简介: 下面讲有我已经打包并且编辑过的zip包,你可以在下面下载即可. 当前讲解的IK分词器 包的 version 为1.8. 一.下载zip包. 下面 ...

  9. NativeCode中通过JNI反射调用Java层的代码，以获取IMEI为例

    简单说,就是在NativeCode中做一些正常情况下可以在Java code中做的事儿,比如获取IMEI. 这种做法会使得静态分析Java层代码的方法失效. JNIEXPORT jstring JNI ...

  10. 51nod 125乘法逆元 （扩展欧几里得）

    给出2个数M和N(M < N),且M与N互质.找出一个数K满足0 < K < N且K * M % N = 1,假设有多个满足条件的.输出最小的. Input 输入2个数M, N中间用 ...