[英]Form targetting an iframe is opening new tab in Chrome
I am trying to submit a form to an iframe both of which are constructed dynamically in my project using javascript. 我正在尝试向iframe提交表单,这两个表单都是在我的项目中使用javascript动态构建的。
<script>
document.querySelector('iframe').setAttribute('id', iframeId);
document.getElementById(iframeId).setAttribute('name', target);
document.getElementById(iframeId).setAttribute('width', width);
document.getElementById(iframeId).setAttribute('height', height);
document.querySelector('form').setAttribute('id', id);
document.getElementById(id).setAttribute('target', target);
document.getElementById(id).setAttribute('action', actionURL);
document.getElementById(id).submit();
<script>
This is how it looks later in the browser Web Inspector. 这就是稍后在浏览器Web Inspector中的外观。
<iframe id="my_frame" name="my_frame" width="700" height="400">
<p>Your browser does not support iframes.</p>
</iframe>
<form id="my_form" target="my_frame" action="http://localhost:8080/MyProject/loadService" method="POST" style="display: none;">
<input type="hidden" name="userId"/>
<input type="hidden" name="locale"/>
</form>
This works well for me in Firefox but in Chrome it opens a new tab. 这对我来说在Firefox中效果很好,但在Chrome中会打开一个新标签页。 I tried the solution given here but it didn't resolve the issue.
我尝试了此处给出的解决方案,但未能解决问题。 Can anyone please suggest what is missing?
有人可以建议缺少的内容吗?
I had the same issue. 我遇到过同样的问题。 I followed this post which fixed it for me.
我关注了这篇为我修复的帖子。 try dynamically generating the iframe, and make sure to set the name/id that will be targeted by the form BEFORE you append the iframe to the DOM.
请尝试动态生成iframe,并确保在将iframe附加到DOM之前,设置将以该格式定位的名称/ id。
example: 例:
iframe = document.createElement('iframe');
iframe.name = 'target_name';
iframe.id = 'target_name';
// now append to DOM, ideally to a container element
document.body.appendChild(iframe);
Remove the iframe from your html and try doing like this: 从您的html中删除iframe,然后尝试执行以下操作:
//Create the iframe, set its attributes and append it before the form
var iframe = document.createElement('iframe');
iframe.name = 'my_frame';
iframe.id = 'my_frame';
iframe.width = '400';
iframe.height = '700';
var form_element = document.getElementById('my_form');
form_element.parentNode.insertBefore(iframe, form_element);
//Submit form to iframe
document.getElementById('my_form').submit();
This post suggests adding the target-attribute of the form dynamically before submitting the form. 这篇文章建议在提交表单之前动态添加表单的target-attribute。
Since you are creating both – the form and the iframe – dynamically, have you tried creating and adding the iframe to the DOM before the form? 由于您是同时动态创建表单和iframe,因此您是否尝试过在表单之前创建iframe并将其添加到DOM? Maybe the target-id has to exist on form-creation-time for it to work correctly.
也许target-id必须存在于form-creation-time上才能正常工作。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.