从iframe将表单传递给父母的条件

Question

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

我有一个添加到购物车窗体内的iframe（我的父母和iframe驻留在同一个服务器/目录）。提交时，我想将表单传递给父页面上的脚本。该脚本将关闭iframe（colorbox）窗口并提交表单，但有一个例外;我有两个版本的网站，一个用于使用iframe显示产品的标准浏览器，另一个是直接打开产品页面并按原样正常工作的移动网站。两者都使用信息存储在同一个数据库，这意味着形式总是相同的，所以我需要一个条件，沿着行的东西，如果这个页面是在一个iframe（通过形式传递给父母的脚本提交） （按原样提交）。我发现这里的计算器这个片段，我认为应该在有条件的工作：

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