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

iframe子页面与父页面通信根据iframe中src属性是同域链接还是跨域链接，通信方式也不同。

一、同域下父子页面的通信

父页面parent.html

<html>

<head>

    <script type="text/javascript">

        function say(){

            alert("parent.html");

        }

        function callChild(){

            myFrame.window.say();

            myFrame.window.document.getElementById("button").value="调用结束";

        }

    </script>

</head>

<body>

    <input id="button" type="button" value="调用child.html中的函数say()" onclick="callChild()"/>

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

</body>

</html>

子页面child.html

<html>

<head>

    <script type="text/javascript">

        function say(){

            alert("child.html");

        }

        function callParent(){

            parent.say();

            parent.window.document.getElementById("button").value="调用结束";

        }

    </script>

</head>

<body>

    <input id="button" type="button" value="调用parent.html中的say()函数" onclick="callParent()"/>

</body>

</html>

方法调用

父页面调用子页面方法：FrameName.window.childMethod();

子页面调用父页面方法：parent.window.parentMethod();

DOM元素访问

获取到页面的window.document对象后，即可访问DOM元素

注意事项

要确保在iframe加载完成后再进行操作，如果iframe还未加载完成就开始调用里面的方法或变量，会产生错误。判断iframe是否加载完成有两种方法：

1. iframe上用onload事件

2. 用document.readyState=="complete"来判断

js父页面和子页面相互取值的更多相关文章

js里父页面与子页面的相互调用
一.在页面里用 open 打开的子页面: 1.子页面调用父页面的方法,包括子页面给父页面传值: window.opener.methodName(); window.opener.methodName ...
Iframe父页面与子页面之间的相互调用
iframe元素就是文档中的文档. window对象: 浏览器会在其打开一个HTML文档时创建一个对应的window对象.但是,如果一个文档定义了一个或者多个框架(即:包含一个或者多个frame或者i ...
js父页面和子页面之间传值
今天和朋友一块讨论,怎样通过js在父页面和子页面之间传值的问题,总结例如以下: 需求描写叙述:父页面有多个子页面.实如今父页面点击子页面,传值到子页面. 看着非常easy,试了好久.主要纠结在怎样获取 ...
父页面调用子页面js的方法
iframe子页面调用父页面javascript函数的方法今天遇到一个iframe子页面调用父页面js函数的需求,解决起来很简单,但是在chrome浏览器遇到一点小问题.顺便写一下iframe的父页面 ...
Jquery父页面和子页面的相互操作
//父页面调用子页面Add函数 $("iframe")[0].contentWindow.Add() //父页面对子页面Id为Sava的Dom元素执行一次单击操作 $(" ...
使用layer 弹出对话框子父页面相互参数传递父页面获取子页面参数实例
一.先看效果: 1.点击三个点的图标弹出了子页面: 2.子页面调用父页面方法,图一调用父页面方法,图二得到父页面var变量. 3.选择之后,关闭弹框,父页面得到子页面单选框选择的v ...
JavaScript从父页面获取子页面的值（子页面又如何访问父页面）
之前还真没做过类似的东西,,top页面获取子页面的document.. 在百度搜了下即找到这个东东,还好,能用. 主要就是使用 contentWindow方法,获取子页面的所有document,再做处 ...
Js动态获取iframe子页面的高度////////////////////////zzzz
Js动态获取iframe子页面的高度 Js动态获取iframe子页面的高度总结问题的缘由产品有个评论列表引用的是个iframe,高度不固定于是引发这个总结. 方法1:父级页面获取子级页面的高度 ...
Iframe父页面与子页面之间的调用
原文:Iframe父页面与子页面之间的调用 Iframe父页面与子页面之间的调用专业词语解释如下: Iframe:iframe元素是文档中的文档. window对象: 浏览器会在其打 ...

随机推荐

purcell的emacs配置中的自动补全功能开启
标记一下,原文参看purcell的emacs配置中的自动补全功能开启修改init-auto-complete.el文件 ;;(setq-default ac-expand-on-auto-compl ...
获取Class实例的三种方式
方式一: 通过类.枚举.接口.注解.数组类型.原生类型的名称.class package com.rong.test; public class TestClass { public static ...
JAVA第三次笔记
QMetaEnum利用Qt元数据实现枚举(enum)类型值及字符串转换
版权声明:若无来源注明,Techie亮博客文章均为原创. 转载请以链接形式标明本文标题和地址: 本文标题:QMetaEnum利用Qt元数据实现枚举(enum)类型值及字符串转换本文地址:ht ...
微信小程序组件加减号弹出框
 <view class='add-rob' bindtap="setModalStatus" data-status=&qu ...
这套C#编码规范写不错
自己总结的C#编码规范--1.命名约定篇:http://www.cnblogs.com/luzhihua55/p/CodingConventions1.html 自己总结的C#编码规范--2.命名选择 ...
smokping的部署使用
本文是介绍如何的使用smokeping来监控idc机房的网络质量情况,从监控图上的延时与丢包能分辨出你机房的网络是否稳定,是否为多线,是否为BGP机房,到各城市的3个运行商网络各是什么情况,如果出现问 ...
Python urlparse模块
Python urlparse模块 urlparse 模块简介 urlparse模块用于把url解析为各个组件,支持file,ftp,http,https,imap,mailto,mms,news,n ...
【BZOJ2876】【NOI2012】骑行川藏（数学，二分答案）
[BZOJ2876][NOI2012]骑行川藏(数学,二分答案) 题面 BZOJ 题解我们有一个很有趣的思路. 首先我们给每条边随意的赋一个初值. 当然了,这个初值不会比这条边的风速小. 那么,我们 ...
【CF700E】Cool Slogans（后缀自动机）
[CF700E]Cool Slogans(后缀自动机) 题面洛谷 CodeForces 题解构建后缀自动机,求出后缀树现在有个比较明显的$dp$ 设$f[i]$表示从上而下到达当前点能够 ...