当一个页面使用了iframe作为嵌套时,如何想要将父页面的数据传给iframe子页面,那iframe所指向的呢个子页面是怎么获取呢,又或者子页面的数据要给父页面使用,那么父页面又如何获取子页面的数据呢?下面根据这种情况作了一个简单的demo案例:

父页面是parentPage.html,子页面是childPage.html。

1、情况一:父页面获取子页面传入的数据(子页面给父页面传值)

父页面:

//获取子页面传入的数据
function GetChildValue(obj){
document.getElementById('texts').innerText = obj;
}

子页面:

//给父页面传数据
var txt = '我是子界面主动传值给父界面的数值';
parent.GetChildValue(txt); //GetValue是父界面的Js 方法

2、情况二:子页面获取父页面的数据(父页面给子页面传值)

父页面:

//给子页面传入数据
function toChildValue(){
var txt = '这是父页面给子页面的数据';
return txt;
}

子页面:

//获取父页面传来的数据
var getParentVule = window.parent.toChildValue();
console.log(getParentVule)

具体传值的数据根据自己的项目要求修改,下面放上两个页面的完整代码:

父页面parentPage.htm

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>父页面</title>
<style type="text/css">
.box{
width: 600px;
height: 400px;
margin: 10px auto;
}
h3{
font-size: 16px;
}
.cont{
width: 100%;
}
.cont h4{
font-size: 14px;
}
.cont #texts{
width: 100%;
line-height: 22px;
font-size: 13px;
color: #2E2D3C;
} iframe{
/*只是隐藏,但任然保留DOM结构*/
visibility: hidden;
}
</style>
</head>
<body>
<div class="box">
<h3>这是父页面</h3>
<div class="cont">
<h4>这是从子页面传入的数据:</h4>
<div id="texts"></div>
<iframe src="childPage.html" width="1px" height="1px" class="myIframe" name="myIframe"></iframe>
</div>
</div> <script type="text/javascript">
//获取子页面传入的数据
function GetChildValue(obj){
document.getElementById('texts').innerText = obj;
} //给子页面传入数据
function toChildValue(){
var txt = '这是父页面给子页面的数据';
return txt;
}
</script>
</body>
</html>

 子页面childPage.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>子页面</title>
<style type="text/css">
.box{
width: 600px;
height: 400px;
margin: 10px auto;
}
h3{
font-size: 16px;
}
</style>
</head>
<body>
<div class="box">
<h3>这是子页面</h3>
</div> <script type="text/javascript">
//给父页面传数据
var txt = '我是子界面主动传值给父界面的数值';
parent.GetChildValue(txt); //GetValue是父界面的Js 方法 //获取父页面传来的数据
var getParentVule = window.parent.toChildValue();
console.log(getParentVule) </script>
</body>
</html>

关于使用iframe的父子页面进行简单的相互传值的更多相关文章

  1. iframe之父子页面通信

    iframe之父子页面通信 1.获取 子页面 的 window 对象  在父页面中,存在如下两个对象 window.frames document.iframeElement.contentWindo ...

  2. 六)iframe 及父子页面之间获取元素、方法调用

    http://www.w3school.com.cn/tags/tag_iframe.asp father.html <!DOCTYPE html> <html> <he ...

  3. iframe父子页面之间相互调用元素和函数

    <!doctype html> <html> <head> <meta http-equiv="Content-Type" content ...

  4. js控制父子页面传值(iframe和window.open)

    在html中,window对象代表浏览器中一个打开的窗口,就像我们C/S中做窗体一样,在该页的window对象就是new了一个新的窗体对象. 就像做C/S开发一样,浏览器是一个软件,每一个网页都是它n ...

  5. iframe 自适应高度、父子页面传值、回调

    总结一下最近用iframe遇到的问题与解决办法: 结构:主页面main.html,里面套用iframe.iframe不能出现滚动条,自适应子页面高度.内容多了滚动条是main.html页面的. 1.  ...

  6. 页面嵌入iframe关于父子传参调用

    1.首先来说一下iframe是干什么用的 IFRAME是HTML标签,作用是文档中的文档,或者浮动的框架(FRAME).iframe元素会创建包含另外一个文档的内联框架(即行内框架),通俗点说就是在一 ...

  7. iframe父子页面通信

    一.同域下父子页面的通信 1.父页面调用子iframe页面 (1)通过iframe的Id获取子页面的dom,然后通过内置属性contentWindow取得子窗口的window对象,此方法兼容各个浏览器 ...

  8. window.postMessage 在iframe父子页面数据传输

    介绍 https://developer.mozilla.org/zh-CN/docs/Web/API/Window/postMessage window.postMessage 发送方 接收方 示例 ...

  9. 父子页面之间元素相互操作(iframe子页面)

    js/jquery获取iframe子页面中元素的方法: 一.使用window.frames["iframe的ID"]获取元素 window.onload = function() ...

随机推荐

  1. SSM整合之---简单选课系统

    简单选课系统 一.实体图 二.功能 三.代码实现 1.SSM环境搭建 (1)pom.xml <dependencies> <dependency> <groupId> ...

  2. python双划线类型

    通过__开始的属性感觉分为两种类型: 利用dir调用的时候: < build in x object at 0x01F116B0>:这种貌似和运算符重载有关系,用户如果需要的话可以重写该函 ...

  3. iOS证书发布推送相关知识科普

    账号种类 1.企业账号 299美刀 -- 可以自己发布App,不能发布到App Store 2.个人/公司账号 99美刀 -- 可以发布到App Store, 不可以自己发布不限安装数量的App 个人 ...

  4. sed将一个文件插入到另一个文件(合并两个文件)

    将before.sh的内容插入到catalina.sh的第一行之后 sed -i '1r /srv/tomcat8/bin/before.sh' /srv/tomcat8/bin/catalina.s ...

  5. Failed to find data source: kafka

    缺少包,在spark-submit 中指定 packages 如下: --packages org.apache.spark:spark-sql-kafka-0-10_2.11:2.1.0

  6. 将项目发布到neuxs私服

    需要在 pom.xml中配置 <distributionManagement> <repository> <id>user-release</id> & ...

  7. iOS堆栈内存区别

    堆和栈的区别: · 1> 堆空间的内存是动态分配的,一般存放对象,并且需要手动释放内存. · 2> 栈空间的内存由系统自动分配,一般存放局部变量等,不需要手动管理内存. 接下来我将从以下几 ...

  8. Python学习之==>网络编程

    一.什么是网络编程 使用Python进行网络编程,就是通过Python打开一个网站,或者请求一个http接口.可以通过标准模块urllib实现,也可以通过更简单易用的第三方模块requests实现. ...

  9. 5.1.k8s.ConfigMap

    ConfigMap #ConfigMap用于保存配置数据的键值对,可用来保存单个属性,或配置文件 #ConfigMap创建 #使用yaml文件创建ConfigMap #cm-demo.yaml kin ...

  10. 一个ETF基金经理的心路历程

    简介: 鹏华沪深300ETF拟任基金经理崔俊杰先生,金融工程专业管理学硕士,5年证券基金从业经验.2008年7月加盟鹏华基金管理有限公司,历任产品规划部产品设计师.量化投资部量化研究员,先后从事产品设 ...