web-dev-qa-db-fra.com

IE Problème: Envoi du formulaire à un iframe à l'aide de javascript

J'essayais de créer un élément iframe en utilisant javascript, comme ceci:

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

Cependant, lorsque j'ai essayé de soumettre un formulaire en utilisant l'iframe nouvellement créé comme cible, IE ouvre une nouvelle fenêtre au lieu d'utiliser l'iframe. 

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

Cela fonctionne parfaitement dans Firefox. En outre, l'iframe est créé, mais n'est pas utilisé.

javascriptformsiframe
35
Erwin

Vous avez rencontré un bogue dans Internet Explorer.

Vous CAN NOT définissez l'attribut name de l'élément ANY dans IE à l'aide de la méthode DOM standard .setAttribute('name', value);

Dans IE (avant la version 8 fonctionnant en mode standard IE8), cette méthode ne permet pas de définir l'attribut name.

Vous devez utiliser l'un des éléments suivants:

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

Bienvenue chez SO.

Un problème que j'ai vu dans votre code est que vous n’affichez jamais l’iframe. Pour qu'il apparaisse sur la page, vous devez l'insérer dans votre document. Dans mon exemple, je crée une balise <span> qui servira d’emplacement dans lequel l’iframe sera inséré.

Voyez si cela fait ce que vous cherchez.

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

METTRE À JOUR:

J'ai trouvé que cette solution ne fonctionne que dans Firefox. Alors j'ai fait des expériences. Il semble que si vous définissez l'iframe dans le code HTML (au lieu de le générer via JS/DOM), cela fonctionnera. Voici la version qui fonctionne avec IE et 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>
7
AJ.
function sendForm(idform){
    var nfi = "RunF"+tagRandom();
    $("body").append("<iframe name=\""+nfi+"\" id=\""+nfi+"\" class=\"runAgents\" src=\"#\"></iframe>");
    $("#"+idform).attr("target",nfi);
    $("#"+idform).submit();
}
0
jceyca

Pour continuer la réponse de @ scunliffe, si vous utilisez Prototype.js:

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

ce qui fonctionne car cette fonction d'assistance détecte HAS_EXTENDED_CREATE_ELEMENT_SYNTAX pour IE, en contournant le bogue .name = ….

0
Jesse Glick