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

2023-12-22 12:48:20

关于使用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>

文章来源:https://blog.csdn.net/airen3339/article/details/135148851
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。