Question

我想知道是否有人可以帮助我。我做了一个简单的使用php的Wordpress插件。它是一个允许用户访问的图库为图像添加标题和自定义字段..表单是使用Fancybox显示，通过单击输入打开 - 按钮...

编辑功能如下所示：

$(".edit").click(function() {
    var formData = $(this).closest('form').serializeArray();
    formData.push({ name: this.name, value: this.value }); //this is
to get the submit-buttons value

    $.fancybox.showActivity();

    $.ajax({
        type        : "POST",
        cache       : false,
        url         : "<?php echo plugins_url(); ?>/upload/
editImageForm.php",
        data        : formData,
        success: function(data) {
            $.fancybox(data);
        }
    });
    return false;

});

由于编辑表格需要imageID来编辑正确的图像 - 我目前通过隐藏字段发送的信息。

我的问题是我希望Edit-form显示在一个 iframe，以便在提交编辑表单时使用表单操作页面出现在iframe中。目前，表单操作页面加载了主窗口..并从wordpress管理区域退出..我如何使用编辑表单的iframe，以及如何从表单发送输入值在主窗口中，到fancybox-iframe（使用编辑表单）内部）？

打开fancybox的表单的HTML如下所示，它显示在概述页面中每个图像的旁边：

<form method='post' action='' class="imageform">
    <input type='submit' value='Edit' name='edit' class="edit imageButton" />
    <input type='submit' value='Delete' name='delete' class="delete imageButton" onClick="return delete('<?php echo $image->name; ?>', '<?php echo $image->id; ?>')"/>
    <input name='imageID' type='hidden' value='<?php echo $image->id; ?>' class="imageID" />
    <input name='imageNavn' type='hidden' value='<?php echo $image->name; ?>' class="imageNavn" />
</form>

（删除按钮上的删除功能只显示javascript中的确认框，询问用户是否确定他/她想要删除图像..）

添加图像表单有点简单，它应该和iframe一样正确显示：

$("#upload").click(function() {
    $.fancybox.showActivity();

    $.fancybox({
        'type'              : 'iframe',
        'width'             : '50%',
        'height'            : '75%',
        'href'              : '<?php echo plugins_url(); ?>/upload/
addImage.php'
    });

});

希望你理解我的问题，并能够帮助我;）

提前致谢！

Answer 1

似乎没有办法设置iframe的名称，这是创建的。

以下是生成fancybox iframe的代码，如图所示，只需要当前时间来创建唯一的iframe。

case 'iframe' :
    $('<iframe id="fancybox-frame" name="fancybox-frame' + new Date().getTime() + 
      '" frameborder="0" hspace="0" scrolling="' + selectedOpts.scrolling + 
      '" src="' + selectedOpts.href + '"></iframe>').appendTo(tmp);

我必须将补丁（可能是微不足道的）写入fancybox以使我们的系统支持这一点。希望有人对fancybox主线做同样的事情。

我需要这个功能，因为我在fancybox中进行文件上传，而Selenium测试环境需要知道iframe名称能够移动到窗口并自动输入测试数据。

Answer 2

避免使用iframe因为它不是（...）中的痛苦所以只需使用ajax，如果可能的话，json可以获得更好的结果。

为什么？

iframe
可能难以使用跨浏览器
会在调试或开发时通过前后切换来浪费你的大量时间。

如果您绝对需要使用iframe $('iframe').attr('src',url);，则会更改iframe网址。另一种方法是在<a target="frame_name">

<iframe name="frame_name">

然后在iframe上你需要使用top.window或window.top不太确定:)但它在dom上获得最多窗口并使用self.window来引用iframe本身。< / p>

希望这有助于一些方法

正确地将输入值从主窗口发送到fancybox iframe

2 个答案: