iframe父子頁面傳參

前言:
在實際開發過程中:會使用iframe嵌套其他頁面,並且會有參數傳遞,以下爲完成例子
(本人項目案例:通過子頁面事件觸發,改變父頁面的頁面狀態)
父頁面:a.html

<!DOCTYPE html>
<html>
<head>
  <title>父頁面</title>
</head>
<body>
  <div class="parent">
    <iframe src="./b.html"></iframe>
  </div>
</body>
<script type="text/javascript">
  // 接收子頁面參數
  window.addEventListener('message', function(result){
    // 審批返回數據,頁面調條數
    var data = JSON.parse(result.data);
    // 彈出框-展示子頁面傳過來的參數
    alert(data.value);
  })
</script>
</html>

子頁面:b.html

<!DOCTYPE html>
<html>
<head>
  <title>子頁面</title>
</head>
<body>
  <div class="children" onclick="toParent()">子頁面按鈕:傳參給父頁面</div>
</body>
<style type="text/css">
  .children{
    background-color: #1ab394;
    cursor: pointer; 
  }
</style>
<script type="text/javascript">
  /**
   * 觸發事件,傳參給父頁面
   */
  function toParent() {debugger
    // 自定義對象
    var obj = {
      value: '我是子頁面傳過來的參數'
    };
    // 傳參給父頁面
    window.parent.postMessage(JSON.stringify(obj),'*');
  }
</script>
</html>
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章