使用条件将表单从 iframe 传递给父级

Question

我最近问了一个类似的问题Close Colorbox iframe after form submit and then redirect parent page，但后来稍微改变了方向，所以我认为最好创建一个新帖子。

我在 iframe 中有一个添加到购物车的表单（我的父级和 iframe 都驻留在同一个服务器/目录上）。提交时，我想将表单传递给父页面上的脚本。该脚本将关闭 iframe(colorbox) 窗口并提交表单，但有一个例外；我的网站有两个版本，一个用于使用 iframe 显示产品的标准浏览器，另一个用于直接打开产品页面并按原样正常工作的移动网站。两者都使用存储信息的相同数据库，这意味着表单始终相同，所以我需要一个条件，类似于 如果此页面位于 iframe 中（将表单传递给父级脚本以进行提交) 否则（按原样提交表单）。我在stackoverflow上找到了这个sn-p，我认为它应该适用于条件：

if (top === self) { not in a frame } else { in a frame }

我有三种不同的形式，每一种都在一个单独的产品页面上：

最基本的：

<form name="add_cart" action="index.php?action=add" method="post" 
enctype="multipart/form-data">

<input type="hidden" name="quantity" value="1" /> 
<input type="hidden" name="products_id" value="1" /> 
<input type="hidden" name="id[1]" value="1" id="att-1-1" />
<input type="hidden" name="id[2]" value="2" id="att-2-2" /> 


<input class="cssButton button" type="submit" value="Add Product"/> 
</form>

然后一个有多个复选框选择：

<form enctype="multipart/form-data" method="post" action="index.php?action=add" 
name="cart_quantity">

<input type="hidden" value="1" name="quantity">
<input type="hidden" value="3" name="products_id">

<input id="option-8-1" type="checkbox" value="1" name="id[8][1]">
<input id="option-8-2" type="checkbox" value="2" name="id[8][2]">
<input id="option-8-3" type="checkbox" value="3" name="id[8][3]">
<input id="option-8-4" type="checkbox" value="4" name="id[8][4]">

<input class="cssButton button" type="submit" value="Add Selected Items" >
</form>

第三个带有单个选项的下拉选择：

<form enctype="multipart/form-data" method="post" action="index.php?action=add" name="cart_quantity">


<input type="hidden" name="quantity" value="1" />
<input type="hidden" name="products_id" value="3" />  
<input type="hidden" name="id[6]" value="9" id="att-6-9" /> 

<select name="id-7" id="options">
<option value="1">option 1</option>
<option value="2">option 2</option>
<option value="3">option 3</option>
<option value="4">option 4</option>
</select>

我正在寻求任何帮助或指导以使其正常工作。虽然我对 javascript 有更好的掌握，但 Jquery 会很好，任何东西都值得赞赏。

Answer 1

您不需要条件，只需不显眼地使用 javascript，即如果启用了 javascript，则 javascript 停止（劫持）表单提交，将表单数据发送到父级并关闭 iframe - 如果未启用 javascript，则表单正常提交：例如使用 jQuery

<form id="my-form">
</form>

<script>
    function formSubmissionHandler(){
        // handle form submission
    }

    $(document).ready(function(){
        $('#my-form').submit(function(){
            formSubmissionHandler();
            return false;
        });
    });
</script>

http://en.wikipedia.org/wiki/Unobtrusive_JavaScript