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

Posted 2023-02-24

【中文标题】iframe onload 为目标表单提交触发两次

【英文标题】：iframe onload is triggered twice for target form submission

【发布时间】：2014-04-26 23:29:53

【问题描述】：

我正在使用 iframe 上传具有 ajax 感觉的图像，我使用 unload 触发加载预览并隐藏加载 gif 的 javascript 函数，但我的问题是该函数在页面加载时加载一次, 并在提交表单时执行一次。我想不出另一个可以工作的处理程序？或者还有其他选择吗？

<form id="profileForm" method="post" action="build/parsers/upload-photo.php" enctype="multipart/form-data" target="upload" onsubmit="startPhoto();">
    <input type="file" name="photo" id="profileSelect" onchange="document.getElementById('profileForm').submit();" />
    <button id="profileUpload" onclick="document.getElementById('profileSelect').click(); return false;" type="submit">Upload</button>
 </form>

 <iframe name="upload" id="upload" onload="stopPhoto();"></iframe>

【参考方案1】：

它被正确触发了两次，因为 iframe 加载了两次。正如您所注意到的，当您发布到它时它会再次加载。您可以通过在表单的onsubmit 处理程序中设置iframe 的onload 处理程序使其按预期工作。这样，您的函数只会在表单提交后的 iframe 加载中触发。

【讨论】：

这似乎对我不起作用。是因为 iframe 没有被提交......表单是？因此，永远不会为 iframe 触发提交。

正如我所说，你使用onsubmit 处理程序表单，将onload 处理程序iframe绑定到你的@ 987654325@函数。

即使我在表单提交处理程序中添加了onload 处理程序，此解决方案也对我不起作用。

【参考方案2】：

我遇到了类似的问题，iframe onload 事件在 Chrome 中的表单提交上按预期触发/触发，但在 IE11 中的表单提交上它触发了两次，以及在页面加载时触发。检查它是否解决了您的问题？

iframe onload in chrome vs IE11