关于使用iframe的父子页面进行简单的相互传值
当一个页面使用了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的父子页面进行简单的相互传值的更多相关文章
- iframe之父子页面通信
iframe之父子页面通信 1.获取 子页面 的 window 对象 在父页面中,存在如下两个对象 window.frames document.iframeElement.contentWindo ...
- 六)iframe 及父子页面之间获取元素、方法调用
http://www.w3school.com.cn/tags/tag_iframe.asp father.html <!DOCTYPE html> <html> <he ...
- iframe父子页面之间相互调用元素和函数
<!doctype html> <html> <head> <meta http-equiv="Content-Type" content ...
- js控制父子页面传值(iframe和window.open)
在html中,window对象代表浏览器中一个打开的窗口,就像我们C/S中做窗体一样,在该页的window对象就是new了一个新的窗体对象. 就像做C/S开发一样,浏览器是一个软件,每一个网页都是它n ...
- iframe 自适应高度、父子页面传值、回调
总结一下最近用iframe遇到的问题与解决办法: 结构:主页面main.html,里面套用iframe.iframe不能出现滚动条,自适应子页面高度.内容多了滚动条是main.html页面的. 1. ...
- 页面嵌入iframe关于父子传参调用
1.首先来说一下iframe是干什么用的 IFRAME是HTML标签,作用是文档中的文档,或者浮动的框架(FRAME).iframe元素会创建包含另外一个文档的内联框架(即行内框架),通俗点说就是在一 ...
- iframe父子页面通信
一.同域下父子页面的通信 1.父页面调用子iframe页面 (1)通过iframe的Id获取子页面的dom,然后通过内置属性contentWindow取得子窗口的window对象,此方法兼容各个浏览器 ...
- window.postMessage 在iframe父子页面数据传输
介绍 https://developer.mozilla.org/zh-CN/docs/Web/API/Window/postMessage window.postMessage 发送方 接收方 示例 ...
- 父子页面之间元素相互操作(iframe子页面)
js/jquery获取iframe子页面中元素的方法: 一.使用window.frames["iframe的ID"]获取元素 window.onload = function() ...
随机推荐
- NOIP2002-字串变换【双向BFS】
NOIP2002-字串变换 Description 已知有两个字串A,BA,B及一组字串变换的规则(至多66个规则): A_1A1 ->B_1B1 A_2A2 -> B_2B2 规 ...
- linux xz压缩解压
1. 解压 xz 格式文件 方法一: 需要用到两步命令,首先利用 xz-utils 的 xz 命令将 linux-3.12.tar.xz 解压为 linux-3.12.tar,其次用 tar 命令将 ...
- Ajax监测开始执行及结束执行
特别提示:本人博客部分有参考网络其他博客,但均是本人亲手编写过并验证通过.如发现博客有错误,请及时提出以免误导其他人,谢谢!欢迎转载,但记得标明文章出处:http://www.cnblogs.com/ ...
- csdn专家主页
百度张瑞琪: http://blog.csdn.net/abcjennifer 深度学习系列教程: http://suanfazu.com/t/caffe/9479
- 国内4G频段划分
国内4G频段划分 2015年 4G网络建设如火如荼地进行,换手机大家几乎都买的4G手机,那么看到如下参数怎么知道手机所支持的网络呢? SIM 1:4G TDD-LTE:TD38/39/40/41: ...
- centos下面配置key登录
centos下需要配置使用key登录,并且要禁止root登录 下面的操作都是用root来设置的 1.添加新用户 例如用户名leisiyuan useradd leisiyuan 2.设置密码 pass ...
- WINDOWS API 大全(二)
9. API之设备场景函数 CombineRgn 将两个区域组合为一个新区域CombineTransform 驱动世界转换.它相当于依顺序进行两次转换CreateCompatibleDC 创建一个与特 ...
- 【c++进阶:c++ algorithm的常用函数】
c++ algorithm的常用函数 https://blog.csdn.net/hy971216/article/details/80056933 reverse() reverse(it,it2) ...
- HTTP缓存初识
一.HTTP缓存 1.强制缓存 2.协商缓存 静态资源 动态资源 二.总结 参考: http://muchstudy.com/2016/08/18/HTTP%E7%BC%93%E5%AD%98%E8% ...
- leetcode434 字符串中的单词树(python)
统计字符串中的单词个数,这里的单词指的是连续的不是空格的字符. 请注意,你可以假定字符串里不包括任何不可打印的字符. 示例: 输入: "Hello, my name is John" ...