web-dev-qa-db-fra.com

Obtenir la valeur du champ de saisie à l'intérieur d'un iframe

Je crée un formulaire avec Javascript uniquement. J'essaie d'utiliser Javascript pour obtenir la valeur du champ de saisie qui se trouve à l'intérieur d'une iframe. Est-il possible d'obtenir la valeur d'un champ qui se trouve à l'intérieur d'une iframe?

javascripthtmlhtml5iframe
18
Muhammad Talha Akbar

Oui, cela devrait être possible, même si le site provient d'un autre domaine.

Par exemple, dans une page HTML de mon site, j'ai un iFrame dont le contenu provient d'un autre site Web. Le contenu iFrame est un champ de sélection unique. 

Je dois pouvoir lire la valeur sélectionnée sur mon site. En d'autres termes, je dois utiliser la liste de sélection d'un autre domaine de ma propre application. Je n'ai aucun contrôle sur les paramètres du serveur.

Au début, nous pourrions donc être tentés de faire quelque chose comme ceci (simplifié):

HTML sur mon site:

<iframe name='select_frame' src='http://www.othersite.com/select.php?initial_name=jim'></iframe>
<input type='button' name='save' value='SAVE'>

Contenu HTML d'iFrame (chargé à partir de select.php sur un autre domaine):

<select id='select_name'>
    <option value='john'>John</option>
    <option value='jim' selected>Jim</option>
</select>

jQuery:

$('input:button[name=save]').click(function() {
    var name = $('iframe[name=select_frame]').contents().find('#select_name').val();
});

Cependant, je reçois cette erreur javascript lorsque je tente de lire la valeur:

Bloqué un cadre avec Origin " http://www.myownsite.com " pour accéder à un cadre avec Origin " http://www.othersite.com ". Protocoles, domaines et les ports doivent correspondre.

Pour contourner ce problème, il semble que vous puissiez indirectement source l'iFrame à partir d'un script de votre propre site} et lui faire lire le contenu de l'autre site à l'aide d'une méthode comme file_get_contents() ou curl etc.

Créez donc un script (par exemple: select_local.php dans le répertoire en cours) sur votre propre site avec un contenu similaire à celui-ci:

PHP contenu de select_local.php:

<?php
    $url = "http://www.othersite.com/select.php?" . $_SERVER['QUERY_STRING'];
    $html_select = file_get_contents($url);
    echo $html_select;
?>

Modifiez également le code HTML pour appeler ce script local (au lieu du script distant):

<iframe name='select_frame' src='select_local.php?initial_name=jim'></iframe>
<input type='button' name='save' value='SAVE'>

Votre navigateur devrait maintenant penser qu'il charge le contenu iFrame du même domaine.

28
Stefan
<iframe id="upload_target" name="upload_target">
    <textarea rows="20" cols="100" name="result" id="result" ></textarea>
    <input type="text" id="txt1" />
</iframe>

Vous pouvez obtenir de la valeur par JQuery

$(document).ready(function(){
  alert($('#upload_target').contents().find('#result').html());
  alert($('#upload_target').contents().find('#txt1').val());
});

travailler uniquement sur le même lien de domaine

4
Harshit Tailor
document.getElementById("idframe").contentWindow.document.getElementById("idelement").value;
1
Mahdi

Sans Iframe, nous pouvons le faire avec JQuery mais cela ne vous donnera que La source de la page HTML et aucun lien dynamique ni balise HTML ne s'afficheront . Presque identique à la solution php mais dans JQuery :) Code ---

var purl = "http://www.othersite.com";
$.getJSON('http://whateverorigin.org/get?url=' +
    encodeURIComponent(purl) + '&callback=?',
    function (data) {
    $('#viewer').html(data.contents);
});
1
Manish Shukla