6

我有一个表单，当表单发布到 PHP 脚本时，它使用 target 属性来定位 iframe。这部分工作正常，但我需要根据 php 脚本将放入 iframe 的几个结果来做一些事情。

我正在考虑做的是当 PHP 脚本完成发布后，它会回显一些包含各种元素的隐藏输入字段，例如帖子的状态，是否成功以及如果成功发布最终结果是什么。

但是，如果我这样做，它会将其放入 iframe 中，因此主网页将无法访问隐藏的输入字段。

主网页如何能够访问这些隐藏的输入字段，以便主网页可以执行某些操作，即使网页中的 div 显示特定的错误消息或其他内容。

另一件事是，一旦我知道如何从隐藏的输入字段中获取数据，我怎么知道何时可以去获取值。我在想，当表单通过 JavaScriptdocument.forms["myform"].submit()代码发布时，我可以做一个 while 循环并检查另一个隐藏输入字段状态是否设置为完成，一旦它说完成，我就可以从隐藏输入字段中获取值.

我不确定我建议的方式是否正确或做我想要实现的目标，或者是否有更好的方法。

更新

我已经尝试过@lanzz 的建议，但似乎没有奏效。以下是我尝试过的。

$("iframe#image_upload_frame").on('load', function()
{
   var iframeBody = this.contentDocument.body;


   var data = $(iframeBody).find("#imageDirectory");
   alert("data: " + data);
});

以下是 iframe 的定义方式

<iframe id="image_upload_frame" name="image_upload_frame"></iframe>

我在 iframe 内的 php 脚本中回显了一个隐藏的输入字段。

echo '<input type="hidden" id="imageDirectory" value="'.$imageDirectory.'" />';

回声确实有效，因为当我看到查看 iframe 源时，我可以看到隐藏的输入，但是，警报对话框永远不会显示，好像某些东西不工作一样。谷歌浏览器开发控制台也没有报告错误。

4

5 回答 5

5

如果我理解正确 - 一旦将值加载到 iframe 中，您需要父窗口中 iframe 中的值。我会将javascript添加到调用父级并执行函数的iframe中。

在主框架中：

function incomingValue(val) {
   alert(val)
}

在生成的 iframe 中的某处：

<script type="text/javascript">
 parent.incomingValue("Hello world");
</script>

假设两个帧源共享相同的域，这应该可以工作。

于 2012-10-31T13:59:21.603 回答
1

您可以使用postMessage在 iframe 与其父级之间进行跨文档通信。

看：

http://viget.com/extend/using-javascript-postmessage-to-talk-to-iframes

http://javascript.info/tutorial/cross-window-messaging-with-postmessage

于 2012-10-28T00:28:52.743 回答
1

由于您在同一个域上运行，因此您的主页的 Javascript 可以轻松访问以下内容<iframe>（示例使用 jQuery，您可以重写为您计划使用的任何库）：

$('iframe#the-id-of-the-iframe').on('load', function() {
    var iframeWin = this.contentWindow;
    var iframeBody = this.contentDocument.body;

    // access global JS vars defined in the iframe:
    var someIframeVariable = iframeWin.globalIframeVariable;

    // or, directly access elements in the iframe:
    var someIframeElement = $(iframeBody).find('#element-id-inside-iframe');
});
于 2012-10-28T17:10:01.983 回答
0

不久前，我写了一段代码来使用一些 javascript 和两个 iframe 上传图片。对我来说最重要的是预览图片。也许它会帮助你：

HTML：

<div id='fakebutton' onclick='select_pic()'>Just a button to select a pic</div>
<iframe src='uploadform.php' name'pic_frame'></iframe>
<iframe src='#' name='target_frame'></iframe>

两个 iframe 都是隐藏的。目标框架没有源（或空页面，如果您愿意）。

uploadform.php 包含一个表单：

<form id='upload_form' action='dosomething.php' method='post' enctype='multipart/form-data' target='target_frame' onsubmit=''>
<input id='realfoto' name='realfoto' type='file' onchange='parent.foto_upload(window.frameElement.id)'>
</form>

然后是一些javascript：首先当用户点击假的时候触发文件浏览器

function select_pic(){
   b=window.frames['pic_frame'];
   b.document.upload_form.realfoto.click();
   }

然后是实际上传图片的部分，由输入元素中的 onchange() 触发：

function foto_upload(o){
  var b=o;
  o=getElementById(o);
  if(o.contentDocument ) {o = o.contentDocument;}
  else if(o.contentWindow ){o = o.contentWindow;}
  else{return false;}
  if(test_pic(o,b)){ //test if it is really a pic
     getObj('foto_tmpdir').value=o.getElementById('tmp_dir').value;
     o.getElementById('doctype_nr').value=b;
     o.fotoform.submit();
     }
  else{
return false;}
}

在 dosomething.php 中，我对上传的图片执行操作（重命名、调整大小等）。它包含几行javascript：

$a = 'upload was succes';
$b = 'my_image_name';
$c = 'whatever you want to put here';  
?>
  <script type="text/javascript">
  window.top.window.smurf(<?php echo "'$a','$b','$c'" ?>);</script>
  <?php

如果您在 javascripty 中创建一个名为 smurf(a,b,c) 的函数，您可以通过 php 脚本传递您想要的任何内容。对我来说最重要的事情之一是我现在可以将上传图片的文件名传递给 javascript，并使用它来更改 image.src 以进行预览。希望你可以使用它的一些东西。

于 2012-11-02T14:16:29.007 回答
0

您的 iframe 源页面应该有一个 javascript 调用函数，而不是隐藏字段。该函数将调用打开器窗口（您的主页），然后执行您想要的任何功能。作为蓝图，请看以下内容：

//in iframe src.php

<?php
if ($something){
?>
<script>
function doSomethingWithOpenerWindow(){
opener.document.write('hi);
}
doSomethingWithOpenerWindow()
</script>
<?php
}
else{
?>
<script>
function doAnotherSomethingWithOpenerWindow(){
opener.document.write('hi);
}
doAnotherSomethingWithOpenerWindow()
</script>  

<?php
}
?>
于 2012-11-02T15:52:56.757 回答