javascript - 表单不传递 iframe 输入

Question

我最近一直在开发一个带有表单的网络应用程序。然而，我遇到了障碍。在此表单中，有一个包含照片上传的 iframe。提交后，照片将被上传并告知用户。此页面上的表单中还有一个隐藏的输入。在此隐藏输入中，存储了图像的 URL。这是我的脚本，应该拦截此输入的值并以以下形式传递它:

window.onload = function() {
    document.getElementById("photoFrame").contentDocument.forms[0].onsubmit = function () {
        document.getElementById("entry_862192515").setAttribute("value", document.getElementById("photoFrame").contentDocument.forms[0].getElementById("photoUrl").value);
    }
}

这是我的 HTML:

<iframe width="100%" name="select_frame" src="/photo-upload.php" allowtransparency="true" frameborder="0" id="photoFrame"></iframe>

photo-upload.php 只是一个上传图像的简单表单。现在是 upload.php，这是通过 POST 请求上传图像的 PHP 脚本:

<?php

// Cloudinary init
require 'Cloudinary.php';
require 'Uploader.php';
require 'Api.php';
\Cloudinary::config(array( 
  "cloud_name" => "(my name)", 
  "api_key" => "(my key)", 
  "api_secret" => "(my secret)"
));

// Uploads images to Cloudinary
$uploaded_file = \Cloudinary\Uploader::upload($_FILES["fileToUpload"]["tmp_name"]);

// Declares URL to variable
$url = $uploaded_file['secure_url'];

echo '<form><input type="hidden" id="photoUrl" value="'.$url.'" /></form>';
echo '<b style="color:green;">Success! Photo uploaded. Once you finish filling out the form, click the "Send" button.</b>';

?>

这个脚本有什么问题？当我运行它时，我在控制台中没有看到任何错误，并且在 iframe 内，输入包含 URL 值。我究竟做错了什么？非常感谢。

Answer 1

<form>
  Hidden parent's input for photo URL:
  <input id="saveURL" />
  <iframe name="select_frame" src="iFrame.html" id="photoFrame"></iframe>
</form>

<script>

  // wait till parent loads so we don't trigger it during iFrame's first load
  window.onload = function() {

    var parentFormInput = document.getElementById('saveURL');
    var photoFrame = document.getElementById("photoFrame");

    // executes after the iFrame postback completes
    photoFrame.onload = function() {
      var innerDoc = this.contentDocument || this.contentWindow.document;
      var url = innerDoc.getElementById('photoUrl').value; // iframe input
      parentFormInput.value = url; // saves value to the iframe's parent
    }
  }

</script>

iFrame.html 包含以下形式:

<form>
  <input id="photoUrl" style="width:60%" readonly="readonly" value="http://somedomain.com/somefile.jpg" />
</form>

演示:http://plnkr.co/edit/auqk8tQrCYYEIFjJUmPC?p=preview