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

Javascript 使用条件将表单从iframe传递给父级,javascript,jquery,iframe,form-submit,Javascript,Jquery,Iframe,Form Submit,我最近问了一个类似的问题,但后来有点改变了方向,所以我认为最好创建一个新的帖子 我在iframe中有一个add-to-cart表单(我的父级和iframe都位于同一服务器/目录中)。在提交时,我想将表单传递给父页面上的脚本。脚本将关闭iframe(colorbox)窗口并提交表单,但有一个例外;我的网站有两个版本,一个用于标准浏览器,使用iframe显示产品,另一个用于移动网站,直接打开产品页面并按原样工作。两者都使用存储信息的相同数据库,这意味着表单总是相同的,因此我需要一个条件,如果此页面位

我最近问了一个类似的问题,但后来有点改变了方向,所以我认为最好创建一个新的帖子

我在iframe中有一个add-to-cart表单(我的父级和iframe都位于同一服务器/目录中)。在提交时,我想将表单传递给父页面上的脚本。脚本将关闭iframe(colorbox)窗口并提交表单,但有一个例外;我的网站有两个版本,一个用于标准浏览器,使用iframe显示产品,另一个用于移动网站,直接打开产品页面并按原样工作。两者都使用存储信息的相同数据库,这意味着表单总是相同的,因此我需要一个条件,如果此页面位于iframe(将表单传递给父级脚本以供提交)中,则类似于的内容,否则(按原样提交表单)。我在stackoverflow上找到了这段代码,我认为它应该适用于条件:

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>

选择1
选择2
选择3
选择4


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

您不需要条件,只需悄悄地使用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>

函数formSubmissionHandler(){
//处理表格提交
}
$(文档).ready(函数(){
$(“#我的表单”).submit(函数(){
formSubmissionHandler();
返回false;
});
});

以上是完整的脚本,还是需要在//handle表单提交中填写信息?实际上,这并不是javascript是否启用的问题,我在桌面和移动站点之间的主要问题是,虽然两者都使用javascript和jquery,但iphone和android平台上的iframe太小,所以我需要使用完整的页面。