將主窗口的輸入值正確發送到fancybox iframe

我想知道是否有人可以幫助我。我已經爲使用php的Wordpress製作了一個簡單的插件。這是一個庫，允許用戶以添加標題和自定義字段的圖像。該形式是使用的fancybox顯示，即通過點擊輸入 - 按鈕打開...將主窗口的輸入值正確發送到fancybox iframe

編輯功能看起來像這樣的：

$(".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; 

});

由於編輯表單需要的圖像標識編輯正確的圖像 - 信息我目前正在通過一個隱藏字段發送。

我的問題是我希望編輯窗體顯示在 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' 
    }); 

});

希望你明白我的問題，並能幫助我;）

在此先感謝！

來源

2011-01-12 guzh

避免使用iframe，因爲它不是它們在（...）中的痛苦，所以只需使用ajax，如果可能的話可以得到更好的結果。

爲什麼？

I幀可能被一些用戶
被禁止是很難與跨瀏覽器的工作
將切換回浪費了很多的時間和調試運行或開發時轉發。

如果您絕對需要使用iframes以及$('iframe').attr('src',url);將更改iframe網址。另一種方法是使用<a target="frame_name">時<iframe name="frame_name">

然後在本身就需要使用top.window或window.top不太清楚的iframe :)但它可以對DOM最上面的窗口，並使用self.window指自身的iFrame。

希望這有助於一些

來源

2011-01-12 12:04:44 Val

是的，我知道iframe是一個痛苦的XD多年來我一直沒有與iframe合作，我記得爲什麼..但事情是，如果我在fancybox中使用它，插件UI會更好，這就是原因爲何。無論如何，插件只能被某些客戶使用，他們不知道如何禁用iframe，所以這沒有問題。 XD感謝您的幫助，我會研究它:)我之前沒有使用過Ajax，但這可能是解決方案，可以在div中顯示編輯窗體。 – guzh 2011-01-12 14:15:23

似乎怎麼也不會是這樣設置的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名稱能夠移動到窗口並自動輸入測試數據。

來源

2011-03-07 23:29:10

將主窗口的輸入值正確發送到fancybox iframe

回答

相關問題