javascript 父子iframe相互传参数

最新推荐文章于 2022-07-16 09:48:56 发布

晓晓_545

最新推荐文章于 2022-07-16 09:48:56 发布

阅读量238

点赞数

<div class="article-title-box">
        <span class="article-type type-1 float-left">原</span>       <h1 class="title-article">javascript 父子iframe相互传参数</h1>
</div>
<div class="article-info-box">
    <div class="article-bar-top d-flex">
                                            <span class="time">2017年07月03日 08:51:31</span>
        <div class="float-right">
            <span class="read-count">阅读数：5739</span>
                                        </div>
    </div>
</div>
<article>
    <div id="article_content" class="article_content clearfix csdn-tracking-statistics" data-pid="blog" data-mod="popu_307" data-dsm="post">
                <div class="markdown_views">
            <p>前端开发的过程中。可能用iframe去嵌套html页面。</p>

当我们在父iframe中传递参数去给子iframe的时候。
我们可以通过将参数对象设置成子类iframe的window对象的成员变量。

<iframe id="childFrame" src="iframeChild.html">

</iframe>


<script type="text/javascript">
    var childFrameObj = document.getElementById('childFrame');

    childFrameObj.contentWindow.paramFromParent = 'userId0007';
</script>
 
 1
2
3
4
5
6
7
8
9
10

子iframe可以通过访问window对象的成员变量来得到从父iframe中传递来的参数。


 var param = window.paramFromParent;
    var inputObject =  document.getElementsByTagName('input')[0];
    inputObject.value = param;

 
 1
2
3
4
5

父类iframe全部代码
iframeParent.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<iframe id="childFrame" src="iframeChild.html">

</iframe>


<script type="text/javascript">
    var childFrameObj = document.getElementById('childFrame');

    childFrameObj.contentWindow.paramFromParent = 'userId0007';
</script>

</body>
</html>
 
 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

子iframe的全部代码是
iframeChild.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>




<body>
        <input type="text" value="" >
</body>


<script type="text/javascript">
    var param = window.paramFromParent;
    var inputObject =  document.getElementsByTagName('input')[0];
    inputObject.value = param;





</script>
</html>
 
 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

    <div class="article-bar-bottom">
            <div class="article-copyright">
        版权声明：本文为博主原创文章，未经博主允许不得转载。          https://blog.csdn.net/u013803262/article/details/74170904       </div>
                    <div class="tags-box artic-tag-box">
        <span class="label">文章标签：</span>
                    <a class="tag-link" href="http://so.csdn.net/so/search/s.do?q=javascript&amp;t=blog" target="_blank">javascript                     </a><a class="tag-link" href="http://so.csdn.net/so/search/s.do?q=iframe&amp;t=blog" target="_blank">iframe                     </a><a class="tag-link" href="http://so.csdn.net/so/search/s.do?q=参数传递&amp;t=blog" target="_blank">参数传递                     </a>
    </div>
                    <div class="tags-box">
        <span class="label">个人分类：</span>
                    <a class="tag-link" href="https://blog.csdn.net/u013803262/article/category/2788817" target="_blank">javascript                     </a>
    </div>
                </div>

<!-- !empty($pre_next_article[0]) -->