Changer la source d'une iframe via form

Résolu/Fermé

Utilisateur anonyme - 4 mai 2019 à 21:09
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é !!

A voir également:

Changer la source d'une iframe via form
Changer dns - Guide
Changer clavier qwerty en azerty - Guide
Changer carte graphique - Guide
Changer extension fichier - Guide
Changer wifi chromecast - Guide

1 réponse

Réponse 1 / 1

Utilisateur anonyme
Modifié le 5 mai 2019 à 12:20

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

erman
Modifié le 14 mai 2019 à 15:53

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*/

}

erman
Modifié le 14 mai 2019 à 15:56

'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à .

Discussions similaires

Que peut faire 3fois/j un homme, mais qu'1fois/j une femme

Comment donner accès à un Google Form sans compte Gmail

Mettre Facebook Messenger en français