在同一个按钮按下时触发 iframe 并提交表单

关键词：

【中文标题】在同一个按钮按下时触发 iframe 并提交表单【英文标题】：Fire iframe and submit form on the same button press 【发布时间】：2017-03-22 04:23:35 【问题描述】：

在这个问题上花费了好几个小时，但找不到一个好的解决方案，所以这里是：

我在 iframe 中有一个跟踪像素。单击按钮时，我想首先触发跟踪像素，然后提交表单。通常我会在中间有一个页面，在那里我触发一个像素并传递一个表单，但在这个项目中，我无法访问后端，也无法制作中间页面。我试图简单地将 onClick='firePixel()' 添加到按钮，假设它将提交表单并加载 iframe，但事实并非如此。我还尝试创建第二个函数并以某种方式添加回调： onClick(firePixel(submitForm)) 将 submitForm 作为回调 - 也没有运气。

P.S 另外，我尝试在表单外部（如下所示）以及表单内部设置按钮 - 不走运。

不确定这里的最佳做法是什么？我不介意 iframe 是否在后台被触发 - 用户永远不会看到它 - 它只是一个跟踪像素。

请在下面找到代码（不起作用）：

 <iframe id='conversioniFrame' data-src="testFrame.html" 
         src="about:blank" width='100px' >
<div class='panel clearfix'>
    <form id="options-go-to-insurer" action="/life/buy/" method="post">
        <!-- Form stuff -->
    </form>
    <button id="conversionButton" class="button primary expand apply-button" onclick="conversionFunction(submitForm())"><b>Apply Now</b></button>
</div>


<!-- STOP -->
<script>

function conversionFunction(callback) 
    var iframe = $("#conversioniFrame");
    iframe.attr("src", iframe.data("src"));
    callback();


function submitForm() 
    document.getElementById("options-go-to-insurer").submit();

</script>

【问题讨论】：

【参考方案1】：

注意type="button" 是强制不提交表单

如果页面和 iframe 代码来自同一个域，则可以直接返回

<script>parent.document.getElementById("options-go-to-insure‌​r").submit()</script‌​>

来自 testIframe.html

如果没有，试试这个

$(function() 
  $("#conversionButton").on("click", function()  // when button is clicked
    var $tracker = $("#conversioniFrame");
    $tracker.attr("src", $tracker.data("src")); // load the page
  );
  $("#conversioniFrame").on("load", function()  // when page has loaded
    $("#options-go-to-insurer").submit(); // submit the form
  );
);

<iframe id='conversioniFrame' data-src="testFrame.html" src="about:blank" width='100px' >
  <div class='panel clearfix'>
    <form id="options-go-to-insurer" action="/life/buy/" method="post">
      <!-- Form stuff -->
    </form>
    <button type="button" id="conversionButton" class="button primary expand apply-button"><b>Apply Now</b>
    </button>
  </div>

【讨论】：

感谢您的回复！我现在就去检查！请注意，在按下按钮之前 iframe 无法触发 - 我认为您的代码与我的代码一样吗？ 查看我的更新，因为您修复了代码示例以显示 html 嘿，除了#tracker 的来源之外，我想我得到了大部分内容？ 像魅力一样工作！非常感谢您的帮助！现在会仔细研究它，以确保我明白我做错了什么！再次感谢！ 您在将源分配给 iFrame 后立即调用了提交。它不会在执行回调之前等待 iFrame 加载

在按钮按下时颤动旋转图标并带有动画

】在按钮按下时颤动旋转图标并带有动画【英文标题】：Flutterrotateicononbuttonpresswithanimation【发布时间】：2021-07-1008:18:50【问题描述】：我有一个button，里面有一个icon。现在我正在使用两个不同的icons并更改它们onTap：Widgetbuild(Bui... 查看详情

Ruby on Rails：提交按下时的警报按钮

】RubyonRails：提交按下时的警报按钮【英文标题】：RubyonRails:Alertbuttononsubmitpress【发布时间】：2012-10-3116:59:30【问题描述】：我有一个功能，用户可以通过输入注册的电子邮件并单击按钮来重置自己的密码。然后会向该地址发送... 查看详情

iframe onload 为目标表单提交触发两次

】iframeonload为目标表单提交触发两次【英文标题】：iframeonloadistriggeredtwicefortargetformsubmission【发布时间】：2014-04-2623:29:53【问题描述】：我正在使用iframe上传具有ajax感觉的图像，我使用unload触发加载预览并隐藏加载gif的javascript... 查看详情

在 JQuery 委托中触发表单提交

...时间】：2019-06-2703:13:12【问题描述】：我有一个用于确认按钮单击的引导模式，并希望根据用户响应提交特定表单。除了实际的表单提交外，我一切正常。以下是详细信息。该按钮不打算提交它所在的表单。表单的提交按钮工作... 查看详情

Qt3D 应用程序在任何按钮按下时触发系统声音

】Qt3D应用程序在任何按钮按下时触发系统声音【英文标题】：Qt3Dapptriggerssystemsoundsonanybuttonpress【发布时间】：2017-01-0710:12:41【问题描述】：我查看了Qt3D模块的标准示例，但按下任何按钮都会触发烦人的osX系统声音，即按下错误... 查看详情

防止HTML表单提交刷新页面并触发另一个功能[重复]

...：2014-07-2104:00:48【问题描述】：当用户在选择输入元素时按下“回车”键时，如何触发功能同时防止HTML表单刷新页面？==我了解<formonsubmit=&q 查看详情

jq在iframe中点击按钮,父元素触发事件

...面的链接后，这个iframe的子页面弹出来。子页面有个关闭按钮，可以关闭这个这个iframe。问题就是怎么点击子页面的按钮来关闭父页面的窗口呢？不考虑使用插件，最好使用jquery来实现　方法如下：　　当在段落上按下鼠标按钮... 查看详情

在 PyQt5 中按下时如何切换按钮文本

】在PyQt5中按下时如何切换按钮文本【英文标题】：HowtotogglebuttontextwhenpressedinPyQt5【发布时间】：2019-04-0805:40:39【问题描述】：我正在尝试使用PyQt5按下时更改按钮文本。我有一个填充表，每行都有一个按钮。最初按钮应该显示... 查看详情

在 WordPress 中处理来自表单的多个 HTML 提交按钮按下

】在WordPress中处理来自表单的多个HTML提交按钮按下【英文标题】：HandlingmultipleHTMLsubmitbuttonpressesfromforminWordPress【发布时间】：2022-01-2212:33:12【问题描述】：所以我正在运行一个WordPress网站，它有一个我使用HTML制作的表单，其中... 查看详情

如何在按钮按下时删除子/精灵？

】如何在按钮按下时删除子/精灵？【英文标题】：Howtoremovechild/spritesonbuttonpress?【发布时间】：2017-09-2909:47:42【问题描述】：我正在做一个项目，如果用户点击“种植花园”，它将生成随机数量的花和随机数量的杂草。一旦他们... 查看详情

使 Pyqt 按钮在鼠标按下而不是鼠标按下时运行功能

】使Pyqt按钮在鼠标按下而不是鼠标按下时运行功能【英文标题】：MakePyqtButtonRunFunctiononMouseDownInsteadofMouseUp【发布时间】：2020-12-2805:26:53【问题描述】：我用pyqt5做了一个非常简单的钢琴卷。每个键都是一个按钮，并运行一个功... 查看详情

在提交 Angular4 时触发表单验证

...它具有一些自定义（onblur）验证。现在我喜欢在点击提交按钮时触发表单验证。如果表单无效，我不喜欢禁用提交按钮。我试图标记控件并触摸或原始但它不起作用。有人能帮帮我吗？如果单击提交按钮并且表 查看详情

html提交按下并刷新

...2-11-1702:06:58【问题描述】：我有一个带有下拉选择和提交按钮的表单的网页。该页面还具有自动刷新功能（每10秒）以检索和显示来自服务器的最新信息。单击提交按钮时，会弹出一个带有是/否选项的确认警报。用户然后选择yes... 查看详情

在 Bootstrap 模式窗口中单击 Enter 并点击提交按钮时提交表单数据

】在Bootstrap模式窗口中单击Enter并点击提交按钮时提交表单数据【英文标题】：SubmitformdatabothonclickingenterandhittingthesubmitbuttonfromaBootstrapmodalwindow【发布时间】：2013-10-1807:36:00【问题描述】：这是我的模态窗口中的表单：我没有关... 查看详情

使用 UIPageControl 在按钮按下时发送数据和更改页面

】使用UIPageControl在按钮按下时发送数据和更改页面【英文标题】：SenddataandChangePageonbuttonpressusingUIPageControl【发布时间】：2014-01-1423:05:11【问题描述】：我正在使用UIPageControl和UIScrollView通过滚动在视图之间移动。我关注了这个tut... 查看详情

UICollectionView 在按钮按下时无意滚动

】UICollectionView在按钮按下时无意滚动【英文标题】：UICollectionViewisunintentionallyscrollingonbuttonpress【发布时间】：2014-09-1921:19:09【问题描述】：我在UICollectionViewCell中添加了一个UIButton，其中一个触摸事件调用了一个方法，该方法调... 查看详情

jQuery保持表单提交直到按下“继续”按钮

】jQuery保持表单提交直到按下“继续”按钮【英文标题】：jQueryholdformsubmituntil"continue"buttonpressed【发布时间】：2013-11-2505:10:10【问题描述】：我正在尝试提交一个我已经工作过的表单，但现在已经对其进行了修改以包含... 查看详情

Angular 2 提交时触发表单验证

...单并添加了一些自定义验证器。现在我想在用户点击提交按钮时触发表单验证。在到目前为止我发现的示例中，只要表单无效，提交按钮就会被禁用，但我希望始终启用提交按钮，并且当用户单击提交时，应该验证表单。有谁知... 查看详情