javascript 父子iframe相互傳參數

前端開發的過程中。可能用iframe去嵌套html頁面。

當我們在父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>

子iframe可以通過訪問window對象的成員變量來得到從父iframe中傳遞來的參數。


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

父類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>

子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>
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章