Question

我有一个名为parent.html的网页。从那里我打电话给模态对话child.html。我在child.html中有一个链接按钮来关闭模态对话框。同时，我希望将值从child.html传递到parent.html。

如何将子页面中的值发送到父页面？

Answer 1

如果您的子页面（child.html）与父页面位于同一个域，则可以从child.html调用父窗口的函数。

在子页面（child.html）中：

<a href="..." onclick="parent.callFromChildPage('ABC')">Button Title</a>

并且，在父页面（parent.html）中：

<script language="javascript">
function callFromChildPage(a_value){
    alert("A value from child window is :" + a_value); // 'ABC'
}
</script>

而且，如果你可以在子页面（child.html）中使用jQuery，你可以直接设置父页面的元素，如下所示：

<a href="..." onclick="$('#test', window.parent.document).html('ABC');">Button Title</a>

Answer 2

基本上在父页面中定义javascript函数，然后在子页面中使用opener简单地调用此函数。

window.opener允许您引用打开文档的窗口对象。

儿童HTML：

<html>
  <head>
    <script type="text/javascript">
      $('a#child-link').click(function(e){
          e.preventDefault();
          var tmp = $('input#child-input').value();
          window.opener.getChildVar(tmp);
      });
    </script>
  </head>
  <body>
    <input type="text" name="child-text" id="child-input" value="test text" />
    <a href="#" id="child-link">link</a>
  </body>
</html>

父HTML：

<html>
  <head>
    <script type="text/javascript">
      function getChildVar(val) {
        var received_val = val;
      }
    </script>
  </head>
</html>

如何将值从子页面发送到父页面

2 个答案: