显示从iframe传递的父变量

时间:2017-10-23 07:00:00

标签: jquery

我将一个变量从我的iFrame传递到父窗口。在iframe我有:

var recordCount = "<?php echo $totalRows_m;?>";
window.parent.recordCallback(recordCount);

在父窗口中我有:

function recordCallback(recordCount) {
  console.log("RecordCount = " + recordCount);
  $('#Count').html(recordCount);
}

查看控制台我可以看到“recordCount”包含我的数据。同样在父窗口中我有:

<div id="Count"></div>

但数据不会显示在屏幕上。谁能看到我错在哪里?

非常感谢你的时间。

1 个答案:

答案 0 :(得分:2)

recordCallback()的结果应该在两个页面上作为全局变量重新调整。该演示以index.html为父,child.html为子。由于Stack片段的限制,此演示将无法运行。查看此PLUNKER以获取正常运行的演示。

的index.html

(父) (此演示不起作用。请回顾PLUNKER

<!DOCTYPE html>
<html>

<head>
  <style>
    label {
      display: block;
      margin-top: 15px;
    }
    
    #out {
      font: 400 28px/1 Consolas;
      color: red;
    }
  </style>
  <script>
    var recordCount;
  </script>
</head>

<body>
  <h1>Parent Page</h1>
  <label>Record Count: <output id='out'></output></label>
  <iframe id='i1' name='i1' src='child.html'></iframe>

  <script>
    function recordCallback(recordCount) {
      console.log("RecordCount = " + recordCount);
      document.querySelector('#out').value = recordCount;
      return recordCount;
    }
  </script>
</body>

</html>

child.html

<!DOCTYPE html>
<html>

<head>
  <script>
    var recordCount = 21;
  </script>
</head>

<body>
  <h1>Child Page</h1>
  <script>
    recordCount = window.parent.recordCallback(recordCount);
  </script>
</body>

</html>