web-dev-qa-db-fra.com

Un formulaire Firefox ciblant un iframe ouvre un nouvel onglet

<form method="post" target="take_the_reload">

    ...

</form>


<iframe class="hide_me" name="take_the_reload"></iframe>

Mon problème est le suivant:

J'ai un formulaire qui doit être empêché d'actualiser la page sur laquelle il se trouve lors de sa soumission. Pour lutter contre ce problème, j'ai utilisé une iframe vide en tant que target pour le formulaire. Cela fonctionne exactement comme prévu dans Chrome (v12.0.742) mais échoue dans Firefox (v6.0).

Ce qui se passe dans Firefox, c'est que l'iframe est ouvert dans un nouvel onglet lors de la soumission du formulaire, ce qui n'est évidemment pas ce que je veux.

J'ai trouvé quelques-unsliésmessages , mais aucun ne traite de ma situation particulière et leurs solutions ne fonctionnent pas.

Malheureusement, le travail est sur un système propriétaire dans un réseau privé et je ne peux donc pas simplement fournir un lien.

J'ai également essayé d'utiliser frame par opposition à iframe comme réponse à un sujet connexe: l'utilisation de iframes de cette manière est déconseillée. Mais les résultats sont identiques.

De plus, la iframe est codée en dur dans la page en ce sens qu'elle n'est pas ajoutée dynamiquement avec JavaScript. Enfin, comme je l’ai dit plus tôt, cela fonctionne parfaitement dans Chrome, mais ne fonctionne pas du tout dans Firefox. IE n’est pas une préoccupation et toutes les solutions non compatibles avec IE sont donc les bienvenues!

38
ssell

Cela peut paraître stupide, mais avez-vous essayé de donner à l'iframe un identifiant identique à l'attribut name? Cela semble résoudre certains problèmes relatifs aux formulaires.

<form method="post" action="link/to/post/to" target="take_the_reload">

    ...

</form>

<iframe id="take_the_reload" name="take_the_reload"></iframe>
77
sg3s

Notez que si vous avez plusieurs formulaires qui ciblent le même identifiant iframe, Firefox ouvre un nouvel onglet, à moins que les deux formulaires ne portent un nom différent. Curieusement, ce n’est pas un problème dans Chrome. Donc, par exemple, cela ne fonctionnera pas dans Firefox

<form method="post" action="link/to/post/to" target="theiframe">
<!---input stuff here---->
</form>

<form method="post" action="link/to/post/to" target="theiframe">
<!---input stuff here---->
</form>

<iframe id="theiframe" name="theiframe"></iframe>

mais cela fonctionnera dans Chrome. Si vous souhaitez que le code fonctionne à la fois dans Chrome et dans Firefox, vous devez procéder comme suit:

<form name="form1" method="post" action="link/to/post/to" target="theiframe">
<!---input stuff here---->
</form>

<form name="form2" method="post" action="link/to/post/to" target="theiframe">
<!---input stuff here---->
</form>

<iframe id="theiframe" name="theiframe"></iframe>

Je ne sais pas s'il s'agit d'un bug ou si Firefox est simplement conçu de cette façon. Je travaille avec Firefox 18 (dernière version au moment de la rédaction de cet article) et le problème persiste.

J'espère que ceci aide quelqu'un d'autre; J'ai grincé des dents à ce sujet pendant environ 2 heures avant de comprendre enfin quel était le problème.

À votre santé!

10
Charles

CONSEIL: n'utilisez pas de lettres majuscules dans l'identifiant et le nom 

Ça ne marche pas

<iframe id="formSubmit" name="formSubmit">

Travaux

<iframe id="form_submit" name="form_submit">

C'était une telle surprise pour moi!

8
Pawello

Pour ceux qui pourraient rencontrer ce problème ultérieurement, je l'ai résolu en ajoutant un attribut name à l'iframe identique à l'id de l'iframe:

<iframe id='iframeID' name='iframeID'></iframe>

Stupide, oui, mais c'est le firefox qui l'aime

4
Luke Madhanga

Cela peut sembler stupide et étrange, mais les étapes suivantes ont résolu mon problème (Firefox ouvrait un nouvel onglet lors de la soumission dans Iframe)

1) Utilisez la même valeur pour les attributs Iframe "id" et "name"

2) N'utilisez pas les majuscules dans les attributs "id" ou "name" de Iframe (myIframe => my_iframe)

3) Vérifier l’attribut Iframe "src", cela ne fonctionnait pas pour moi quand il était "about: blank", cet attribut devrait être supprimé comme je le vois

1
Artem Chernovol

Je veux juste ajouter que rien de ce qui précède n'a fonctionné pour moi. J'ai trouvé une raison supplémentaire qui a fait que ça marche. L'ajout de l'identifiant a été effectué, puis l'ajout d'un src = au cadre identique à celui de la page à afficher avec un?. Donc, mon code est:

    <iframe id="eframe" name="eframe" src="created.php?"></iframe>

Ce qui résout le problème, ne s'ouvre plus dans une autre fenêtre de Firefox! 

0
GarfieldTheGreat

Une autre variante de ce problème: je rencontrais le même problème et les suggestions "name"/"id" ne faisaient aucune différence. J'ai trouvé que pour moi cela semble être une question liée au domaine.

J'ouvre une page à http: //mypc/app/page.aspx , avec deux iframes (A et B).

iframe A ouvre une nouvelle fenêtre de navigateur vers http: //localhost/app/otherpage.aspx . otherpage.aspx a un formulaire qui cible iFrame B. Soumettre le formulaire ouvre une nouvelle fenêtre à la place.

Si je modifie iFrame A pour ouvrir la nouvelle fenêtre du navigateur en http: //mypc/app/otherpage.aspx , l'envoi du formulaire depuis otherpage.aspx affiche correctement le résultat dans iFrame B.

Donc, du moins dans Firefox 47.0, il semble empêcher l’obtention d’un "ciblage" interdomaine. IE11 ne semble pas avoir de telles inquiétudes (du moins entre localhost et le nom de la machine).

0
Loophole