IE問題：使用javascript將表單提交到iframe

Question

我試圖使用javascript創建一個iframe元素，如下所示：

var iframe = document.createElement('iframe');
iframe.setAttribute('name', 'frame_x');

但是，當我嘗試使用新創建的iframe作為目標提交表單時，IE會打開一個新窗口，而不是使用iframe。

form.setAttribute('target', 'frame_x');
form.submit();

這在Firefox中完美運行。 此外，iframe已創建，但未使用。

Answer 1

您已經在Internet Explorer中遇到了一個錯誤。

您不能使用標准DOM方法設置IE中任何元素的name屬性.setAttribute('name', value);

在IE（在IE8標准模式下運行的版本8之前），此方法無法設置name屬性。

您需要使用以下之一：

//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');

Answer 2

歡迎來到SO。

我在您的代碼中看到的一個問題是，您實際上從未顯示過iframe。 為了使其顯示在頁面上，您必須將其插入到文檔中。 在我的示例中，我創建了一個<span>標記，作為插入iframe的插槽。

看看這是否符合您的要求。

<!-- 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>

更新：

我發現這個解決方案只適用於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>

Answer 3

function sendForm(idform){
    var nfi = "RunF"+tagRandom();
    $("body").append("<iframe name=\""+nfi+"\" id=\""+nfi+"\" class=\"runAgents\" src=\"#\"></iframe>");
    $("#"+idform).attr("target",nfi);
    $("#"+idform).submit();
}

Answer 4

要繼續@ scunliffe的答案，如果使用Prototype.js：

var iframe = Element('iframe', {name: 'frame_x'});

這是有效的，因為這個輔助函數檢測到IE的HAS_EXTENDED_CREATE_ELEMENT_SYNTAX ，解決.name = … bug。

IE問題：使用javascript將表單提交到iframe

問題描述

4 個解決方案

解決方案1
74 已采納 2010-02-02 02:49:52

解決方案2
7 2010-02-02 01:58:55

解決方案3
0 2012-05-16 18:55:39

解決方案4
0 2014-01-07 18:35:31

IE問題：使用javascript將表單提交到iframe

問題描述

4 個解決方案

解決方案1 74 已采納 2010-02-02 02:49:52

解決方案2 7 2010-02-02 01:58:55

解決方案3 0 2012-05-16 18:55:39

解決方案4 0 2014-01-07 18:35:31

解決方案1
74 已采納 2010-02-02 02:49:52

解決方案2
7 2010-02-02 01:58:55

解決方案3
0 2012-05-16 18:55:39

解決方案4
0 2014-01-07 18:35:31