IE 问题：使用 javascript 将表单提交到 iframe
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2181385/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
IE Issue: Submitting form to an iframe using javascript
提问by Erwin
I was trying to create an iframe element using javascript, like so:
我试图使用 javascript 创建一个 iframe 元素，如下所示：
var iframe = document.createElement('iframe');
iframe.setAttribute('name', 'frame_x');
However, when I tried submitting a form using the newly-created iframe as target, IE opens up a new window, instead of using the iframe.
但是，当我尝试使用新创建的 iframe 作为目标提交表单时，IE 会打开一个新窗口，而不是使用 iframe。
form.setAttribute('target', 'frame_x');
form.submit();
This works perfectly in Firefox. Also, the iframe gets created, but is not used.
这在 Firefox 中完美运行。此外，iframe 被创建，但未被使用。
回答by scunliffe
You've hit a bug in Internet Explorer.
You CAN NOTset the name attribute of ANYelement in IE using the standard DOM Method .setAttribute('name', value);
您不能使用标准 DOM 方法在 IE 中设置任何元素的名称属性.setAttribute('name', value);
In IE (before version 8 running in IE8 standards mode) this method will not work to set the name attribute.
在 IE 中（在 IE8 标准模式下运行的版本 8 之前）此方法将无法设置 name 属性。
You need to use one of the following:
您需要使用以下选项之一：
//A (any browser)
var iframe = document.createElement('iframe');
iframe.name = 'frame_x';
//B (only in IE)
var iframe = document.createElement('<iframe name="frame_x"/>');
//C (use a JS library that fixes the bug (e.g. jQuery))
var iframe = $('<iframe name="frame_x"></iframe>');
//D (using jQuery to set the attribute on an existing element)
$('iframe:first').attr('name','frame_x');
回答by AJ.
Welcome to SO.
欢迎来到 SO。
One issue I saw in your code is that you're never actually displaying the iframe. In order for it to appear on the page, you have to insert it into your document. In my example, I create a <span>tag to act as the slot where the iframe will get inserted.
我在您的代码中看到的一个问题是您从未真正显示 iframe。为了让它出现在页面上，您必须将其插入到您的文档中。在我的示例中，我创建了一个<span>标记作为插入 iframe 的插槽。
See if this does what you're looking for.
看看这是否符合您的要求。
<!-- http://stackoverflow.com/questions/2181385/ie-issue-submitting-form-to-an-iframe-using-javascript -->
<html>
<head>
<script type="text/javascript">
function submitFormToIFrame(){
var form=document.getElementById('myform');
form.setAttribute('target', 'frame_x');
form.submit();
}
</script>
</head>
<body>
<h1>Hello Erwin!</h1>
<form id="myform" name="myform" action="result.html">
<input type="button" value="Submit the Form" onClick="submitFormToIFrame();">
</form>
<span id="iframeSlot">
<script type="text/javascript">
var iframe = document.createElement('iframe');
iframe.setAttribute('name', 'frame_x');
document.getElementById('iframeSlot').appendChild(iframe);
</script>
</span>
</body>
</html>
UPDATE:
更新：
I found that this solution is only working in Firefox. So I did some experimenting. It seems that if you define the iframe in the html (instead of generating it via JS/DOM) then it works. Here is the version that works with IE and Firefox:
我发现此解决方案仅适用于 Firefox。所以我做了一些实验。似乎如果您在 html 中定义 iframe（而不是通过 JS/DOM 生成它），那么它就可以工作。这是适用于 IE 和 Firefox 的版本：
<html>
<head>
<script type="text/javascript">
function submitFormToIFrame(){
//IE
if( document.myform ){
document.myform.setAttribute('target','frame_x');
document.myform.submit();
//FF
} else {
var form=document.getElementById('myform');
form.setAttribute('target', 'frame_x');
form.submit();
}
}
</script>
</head>
<body>
<h1>Hello Erwin!</h1>
<form id="myform" name="myform" action="result.html" target="">
<input type="button" value="Submit the Form" onClick="submitFormToIFrame();">
</form>
<span id="iframeSlot">
<iframe name="frame_x">
</iframe>
</span>
</body>
</html>
回答by jceyca
function sendForm(idform){
var nfi = "RunF"+tagRandom();
$("body").append("<iframe name=\""+nfi+"\" id=\""+nfi+"\" class=\"runAgents\" src=\"#\"></iframe>");
$("#"+idform).attr("target",nfi);
$("#"+idform).submit();
}
回答by Jesse Glick
To continue @scunliffe's answer, if using Prototype.js:
要继续@scunliffe 的回答，如果使用 Prototype.js：
var iframe = Element('iframe', {name: 'frame_x'});
which works because this helper function detects HAS_EXTENDED_CREATE_ELEMENT_SYNTAXfor IE, working around the .name = …bug.
之所以有效，是因为此辅助函数检测到HAS_EXTENDED_CREATE_ELEMENT_SYNTAXIE，从而解决了该.name = …错误。
