关于使用iframe的父子页面进行简单的相互传值
?
//获取子页面传入的数据
function GetChildValue(obj){
? ?document.getElementById('texts').innerText = obj;
}子页面：
//给父页面传数据
var txt = '我是子界面主动传值给父界面的数值';
parent.GetChildValue(txt); //GetValue是父界面的Js 方法//给子页面传入数据
function toChildValue(){
? ? var txt = '这是父页面给子页面的数据';
? ? return txt;
}子页面：
//获取父页面传来的数据
var getParentVule = window.parent.toChildValue();
console.log(getParentVule)<!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>