Menu

Changer la source d'une iframe via form

Messages postés
285
Date d'inscription
mardi 24 février 2015
Statut
Membre
Dernière intervention
5 mai 2019
- - Dernière réponse :  erman - 14 mai 2019 à 15:55
Bonjour,

je n'est jamais réellement appris a utiliser javascript et aujourd'hui je m'en mord les doigts....
quelqu'un peut il me montrer comment changer la source d'une ifram via un formulaire qui attend une unique URL ? voila de quoi illustrer :

<div class="leftparam master">
        <form class="slave" action="" method="post">
          <input type="url" name="urlleft" placeholder="   URL left side"/>
          <button type="submit">Go</button>
        </form>
      </div>

  <div id="left_panel">
      <iframe src="https://www.qwant.com/" width="100%" height="100%"></iframe>
    </div>


hésitez pas a me laisser un max d'explication, j’espère que ce sera pas trop compliquer a comprendre.
merci la communauté !!
Afficher la suite 

Votre réponse

1 réponse

Messages postés
285
Date d'inscription
mardi 24 février 2015
Statut
Membre
Dernière intervention
5 mai 2019
2
0
Merci
petit UP de l’espoir ....

j'ai découvert comment changer la source d'une iframe via un bouton html mais toujours rien via un formulaire ...

PS: si certain savent pourquoi je peut afficher bing dans l'iframe mais ne peut pas ouvrir les résultats de recherche je suis preneur (très probablement a cause des mes restrictions du sandbox (allow-same-origin allow-scripts) oui je sait que ces 2 la ensemble c'est pas ouf mais je vois pas comment faire autrement)

please help
probablement c'est une sécurité.
Un formulaire en HTML envoie les données de chaque champ lors de la validation qui recharge la page.
Si vous ne voulez pas recharger la page(ce qui reste pratique pour utiliser un script) vous devez supprimer le submit et remplacer par un simple bouton.
Un exemple on the flight:


<!DOCTYPE html>
<html>
<head>
</head>
<body>
<form method='get' id='selectionpage'>
<select id="selecteur">
<option value='http://google.fr'>G</option>
<option value='http://bing.com'>B</option>
<option value='http://qwant.fr'>Q</option>
</select>
<!-- NE PAS UTILISER: pas pratique dans ce cas car soumet le formulaire donc recharge la page <input type="submit" value="envoyer formulaire"> ou aors il faut 'inhiber' le comportement du formulaire par défaut en désactivant le submit-->
<input id='btselect' type='button' value='choisir la page'>
</form>
  <iframe id="moniframe" src="" width="100%" height="100%"></iframe>
  
<script>

//--un écouteur d'événement déclenche l'action lors du click sur le bouton
document.getElementById('btselect').addEventListener('click',
 function(){//-- ici j'utilise une fonction anonyme mais n'importe quelle fonction peut faire l'affaire, c'est même mieux si nommée
 //-- la ligne suvante donne à l'attribut src de id = 'moniframe' la valeur indiquée par le select (id='selecteur')
 document.getElementById('moniframe').src = document.getElementById('selecteur').value;
 }, false

);

</script>

</body>
<html>


Remarquez les id qui permettent de facilement accéder à un élément de la page(car unique) et l'attribut value qui est fournit comme source(src) de l'iframe.
Sinon si vous voulez utiliser submit et donc envoyer les données on peut faire comme ceci:

document.getElementById('ID_DU_FORM').onsubmit = function () {
//-- instructions ici
}

Mais c'était préférable de l'empêcher car en rechargeant la page vous rechargez aussi le script.

edit: certains attributs sont accessibles par des notations raccourcis (comme .src et .value )et tous peuvent être accessibles par ELEMENT.getattribute('nom_attribut') en lecture et ELEMENT.setattribute('nom_attribut', 'valeur') pour le créer ou le modifier.
//-- en notation raccourcie:
document.getElementById('moniframe').src = document.getElementById('selecteur').value;
//-- même chose sans raccourci:
document.getElementById('moniframe').setattribute('src', document.getElementById('selecteur').getAttribute('value'));


Si vous comprenez pas une fonction de mon code référez vous à la doc JavaScript, ici par ex.:
https://www.w3schools.com/jsref/default.asp

edit2: remarquez que le script est en fin de page. C'est pour éviter qu'il puisse exister avant que les éléments sélectionnés soient crées dans la page ce qui ne marchera pas. Sinon on peut inclure le tout dans un écouteur du chargement de la page:
document.getElementByTagName('body')[0].onload=function(){
//-- le script inclus ici ici est interprété seulement quand la page(body) est en chargé donc pas avant qu'elle existe et garantit que nos éléments utilisés seront bien crées avant d'y faire appel sinon en général on met le script dans le head ou mieux encore dans un fichier externe*/

}
'je n'est jamais réellement appris a utiliser javascript' ni distinguer le verbe avoir du verbe être...sic
pour le reste commencez par les bases...ça vous occupe un moment déjà .
Commenter la réponse de astrocurieux