1. 程式人生 > >javascript 父子iframe相互傳引數

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>