web-dev-qa-db-fra.com

Passer la valeur à iframe depuis une fenêtre

J'ai besoin d'envoyer une valeur à un iframe.

L'iframe est présent dans la fenêtre actuelle. Comment puis-je atteindre cet objectif?

Je dois le faire avec javascript dans la fenêtre parent qui contient l'iframe.

javascripthtmliframe
49
praveenjayapal

Tout d'abord, vous devez comprendre que vous avez deux documents: le cadre et le conteneur (qui contient le cadre).

Le principal obstacle à la manipulation du cadre à partir du conteneur est que le cadre se charge de manière asynchrone. Vous ne pouvez pas simplement y accéder à tout moment, vous devez savoir quand il a fini de se charger. Vous avez donc besoin d'un truc. La solution habituelle consiste à utiliser window.parent dans le cadre pour "monter" (dans le document qui contient la balise iframe).

Vous pouvez maintenant appeler n'importe quelle méthode dans le document conteneur. Cette méthode peut manipuler le cadre (par exemple appeler du JavaScript in le cadre avec les paramètres dont vous avez besoin). Pour savoir quand appeler la méthode, vous avez deux options:

  1. Appelez-le depuis body.onload du cadre.

  2. Mettez un élément de script comme dernière chose dans le contenu HTML du cadre où vous appelez la méthode du conteneur (laissé comme exercice pour le lecteur).

Le cadre ressemble donc à ceci:

<script>
function init() { window.parent.setUpFrame(); return true; }
function yourMethod(arg) { ... }
</script>
<body onload="init();">...</body>

Et le conteneur comme celui-ci:

<script>
function setUpFrame() { 
    var frame = window.frames['frame-id'];
    frame.yourMethod('hello');
}
</script>
<body><iframe name="frame-id" src="..."></iframe></body>
63
Aaron Digulla

Cela dépend de votre situation spécifique, mais si l'iframe peut être déployé après le reste du chargement de la page, vous pouvez simplement utiliser une chaîne de requête, à la:

<iframe src="some_page.html?somedata=5&more=bacon"></iframe>

Et puis quelque part dans some_page.html:

<script>
var params = location.href.split('?')[1].split('&');
data = {};
for (x in params)
 {
data[params[x].split('=')[0]] = params[x].split('=')[1];
 }
</script>
53
Hexagon Theory

Voici une autre solution, utilisable si les trames proviennent de différents domaines.

var frame = /*the iframe DOM object*/;
frame.contentWindow.postMessage({call:'sendValue', value: /*value*/}, /*frame domain url or '*'*/);

Et dans le cadre lui-même:

window.addEventListener('message', function(event) {
    var Origin = event.Origin || event.originalEvent.Origin; // For Chrome, the Origin property is in the event.originalEvent object.
    if (Origin !== /*the container's domain url*/)
        return;
    if (typeof event.data == 'object' && event.data.call=='sendValue') {
        // Do something with event.data.value;
    }
}, false);

Je ne sais pas quels navigateurs prennent en charge cela.

31
Black Mantha

Utilisez la collection de cadres .

Depuis le lien:

var frames = window.frames; // or // var frames = window.parent.frames;
for (var i = 0; i < frames.length; i++) { 
  // do something with each subframe as frames[i]
  frames[i].document.body.style.background = "red";
}

Si l'iframe a un nom, vous pouvez également procéder comme suit:

window.frames['ponies'].number_of_ponies = 7;

Vous ne pouvez le faire que si les deux pages sont diffusées depuis le même domaine.

13
wombleton

Deux autres options, qui ne sont pas les plus élégantes mais probablement plus faciles à comprendre et à implémenter, en particulier dans le cas où les données dont l'iframe a besoin de son parent ne sont que quelques vars, pas des objets complexes:

tilisation de l'identifiant de fragment d'URL (#)

Dans le conteneur:

<iframe name="frame-id" src="http://url_to_iframe#dataToFrame"></iframe>

Dans l'iFrame:

<script>
var dataFromDocument = location.hash.replace(/#/, "");
alert(dataFromDocument); //alerts "dataToFrame"
</script>

tilisez le nom de l'iFrame

(Je n'aime pas cette solution - elle abuse de l'attribut name, mais c'est une option, donc je le mentionne pour mémoire)

Dans le conteneur:

<iframe name="dataToFrame" src="http://url_to_iframe"></iframe>

Dans l'iFrame:

<script type="text/javascript">
alert(window.name); // alerts "dataToFrame"
</script>
11
Haji

Nous pouvons utiliser le concept "postMessage" pour envoyer des données à un iframe sous-jacent depuis la fenêtre principale.

vous pouvez en savoir plus sur postMessage en utilisant ce lien ajouter le code ci-dessous dans la page de la fenêtre principale

// main window code
window.frames['myFrame'].contentWindow.postMessage("Hello World!");

nous passerons "Hello World!" message à une iframe contentWindow avec iframe id = "myFrame".

ajoutez maintenant le code ci-dessous dans le code source iframe

// iframe document code
function receive(event) {
    console.log("Received Message : " + event.data);
}
window.addEventListener('message', receive);

dans la page Web iframe, nous attacherons un écouteur d'événements pour recevoir l'événement et dans le rappel "recevoir", nous imprimerons les données sur la console

0
Yashwanth Kumar

Jetez un œil au lien ci-dessous, ce qui suggère qu'il est possible de modifier le contenu d'un iFrame dans votre page avec Javascript, bien que vous soyez le plus susceptible de rencontrer quelques problèmes croisés entre les navigateurs. Si vous pouvez le faire, vous pouvez utiliser le javascript de votre page pour ajouter des éléments dom cachés à l'iFrame contenant vos valeurs, que l'iFrame peut lire. Accès au document dans un iFrame

0
Gcoop