关于使用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() ...
随机推荐
- Mac 找文件或文件夹,以及开启其他程序,截图快捷键
Mac 图形化界面对操作惯 Win 的人来说比较奇怪. 有一组超级有用的快捷键,control + 空格 按下后会出现一个搜索框,输入计算机上任何你想要找的资源即可打开. 截取全屏:快捷键(Shift ...
- [LeetCode]-algorithms-Median of Two Sorted Arrays
There are two sorted arrays nums1 and nums2 of size m and n respectively. Find the median of the two ...
- PHP通用后台管理系统发布!
下载地址:https://gitee.com/lim2018/phpadmin
- ACM ICPC 2011-2012 Northeastern European Regional Contest(NEERC)A ASCII Area
A: 给你一个矩阵求'/' 和 '\' 围成的图形,简单签到题,有一些细节要考虑. 题解:一行一行的跑,遇到'/'和'\' 就加0.5, 在面积里面的'.' 就加1.用一个flag来判断是否在围住的图 ...
- 一、基础篇--1.1Java基础-抽象类和接口的区别
抽象类和接口的区别 抽象类和接口在设计层面的区别主要体现在:接口是对动作的抽象,抽象类是对根源.类的抽象.抽象类表示的是,这个对象是什么,接口表示的是,这个对象可以做什么. 比如,男人.女人是人,人是 ...
- Linux驱动开发9——kfifo缓冲队列
Kfifo是Linux内核缓冲队列 #include <linux/kfifo.h> 分配kfifo队列,返回值为0表示成功,其他值表示失败 int kfifo_alloc(struct ...
- WPF SAP水晶报表例子和打包Setup
<Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x=" ...
- Mac使用SSH连接远程服务器
1. 终端通过 ssh 连接远程服务器 ssh -p 36622 root@localhost 2. 文件上传下载 上传 scp 下载 scp 3. 客户端 FinalShell(推荐) FileZi ...
- Oracle.DataAccess.Client.OracleCommand”的类型初始值设定项引发异常
Oracle.ManagedDataAccess.dll 连接Oracle数据库不需要安装客户端 最开始,连接Oracle 数据是需要安装客户端的,ado.net 后来由于微软未来不再支持 Syste ...
- ftp4j揭示java.net.SocketException: Connection reset的解决
ftp4j提示java.net.SocketException: Connection reset的解决系统的自动更新FTP服务器,其他计算机连接都没有问题,包括xp.server2008.win7. ...