从 iframe 中的 html 表单响应调用父页面答案

【问题标题】：call onto the parent page from html-form response in iframe从 iframe 中的 html 表单响应调用父页面
【发布时间】：2016-02-02 14:19:43
【问题描述】：

我对处理表单输入和响应很陌生，我只是遇到了如何处理服务器响应的问题。

我有一个常规的输入表单，它调用一个 php 文件 (submit.php) 来处理提交。 submit.php 使用 curl 在 iframe 中执行。（信息：由于一些跨域问题，我无法使用 ajax 调用）

我想使用 javascript 引导模式在表单提交后显示感谢或错误消息。

表单看起来像这样（简化），响应已准备好被调用，并且我将数据提交到同一页面上的 iframe：

<form action="submit.php" method="post" target="iframeAnswer" id="formTest">
  <input type="text" id="name" name="name" type="text" placeholder="your name here">
  <button class="submitMe" id="submitButton">Submit</button>
</form>

<div id="Modal" class="modal fade">
    <!-- ... some html for the thank you pop up ... -->
    <!-- ... display set to none for the moment ... -->
</div>

<iframe src="submit.php" name="iframeAnswer"></iframe>

现在，我收到答案并进行处理。返回是 Json，一个数组 $response["success"]，它是真或假。在失败的情况下，它还包含一个错误数组。这是我处理帖子数据后的响应处理：

$responseJson = json_decode($response, true);

if ($responseJson["success"] == false) {
    for ($i = 0; $i < count($responseJson["errors"]); $i++) {
        // echo $responseJson["errors"][$i].' <br />';
        // HOW to process this answer other than echo
    }
}
else if ($responseJson["success"] == true) {
        // echo "Thank you!"; 
        // What to do here to reach parent frame
    }
}

我的问题和我有点卡住的地方是：我现在可以在 iframe 中回显一个简单的“谢谢”，但我想调用 Javascript（引导模式）以获得更好的响应。或者通常在页面中而不是在 iframe 中做一些事情。

我不知道如何“返回”/“对话”到带有来自这个地方的表单的页面。

如何使用表单在父页面中调用例如下面的 javascript 函数？或者实际上有任何其他功能？

jQuery("#Modal").modal('show');

我觉得我快到了，但不知何故我没有连接最后的点点滴滴。

【问题讨论】：

标签： javascript php iframe response

【解决方案1】：

好的，现在经过一些研究和测试，最终答案似乎很简单。我正在回显一个调用父页面的 javascript 脚本。

告诉javascript在页面加载后执行很重要。否则 Javascript 会尝试立即执行并返回错误，因为文档尚未完成。

您还需要在 submit.php 文件的头部（在 iframe 中）包含 jQuery 和 bootstrap，以便正确执行 jQuery。当然如果你不使用 bootstrap modal 你不需要包含 bootstrap。

添加到 submit.php 的头部：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="../bootstrap/js/bootstrap.min.js"></script>

这是我在submit.php文件中服务器响应处理中添加的内容：

if ($responseJson["success"] == true) {

    echo "<script> $(document).ready( function () {";
    // wait for document to load, so the JS doesnt try to execute while document is written
    echo "$('#Modal', window.parent.document).modal('show');";
    echo "}); </script>";            

    }
}

if ($responseJson["success"] == false) {
    echo "<script> $(document).ready( function () {";

    for ($i = 0; $i < count($responseJson["errors"]); $i++) {
        // Do something here
        // output with Javascript like in the success handling
    }

    echo "}); </script>"; 
}

【讨论】：