J'ai besoin d'envoyer une valeur à une iframe.
L'iframe est présente dans la fenêtre actuelle. Comment puis-je y parvenir ?
Je dois le faire avec du javascript dans la fenêtre parentale qui contient l'iframe.
Réponses
Trop de publicités?
Aaron Digulla
Points
143830
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 y accéder à tout moment, vous devez savoir quand il a fini de se charger. Vous avez donc besoin d'une astuce. La solution habituelle consiste à utiliser window.parent dans le cadre pour aller "en haut" (dans le document qui contient l'image). iframe ).
Vous pouvez maintenant appeler n'importe quelle méthode dans le document conteneur. Cette méthode peut manipuler le cadre (par exemple, appeler une méthode JavaScript en le cadre avec les paramètres dont vous avez besoin). Pour savoir quand appeler la méthode, vous avez deux possibilités :
-
L'appeler à partir de body.onload du cadre.
-
Placez un élément 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 se présente donc comme suit :
<script>
function init() { window.parent.setUpFrame(); return true; }
function yourMethod(arg) { ... }
</script>
<body onload="init();">...</body>Et le conteneur comme ceci :
<script>
function setUpFrame() {
var frame = window.frames['frame-id'].contentWindow;
frame.yourMethod('hello');
}
</script>
<body><iframe name="frame-id" src="..."></iframe></body>
Hexagon Theory
Points
3713
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>Puis quelque part dans la 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>
Black Mantha
Points
595
Voici une autre solution, utilisable si les cadres proviennent de domaines différents.
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 sont les navigateurs qui prennent cela en charge.
PineCone
Points
218
Deux autres options, qui ne sont pas les plus élégantes mais probablement plus faciles à comprendre et à mettre en œuvre, en particulier dans le cas où les données dont l'iframe a besoin de la part de son parent ne sont que quelques variables, et non des objets complexes :
Utilisation de l'identificateur de fragments 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>Utiliser le nom de l'iFrame
(Je n'aime pas cette solution - elle abuse de l'attribut name, mais c'est une option que je 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>
wombleton
Points
6130
Utiliser le collection de cadres .
Extrait du 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 servies par le même domaine.
- Réponses précédentes
- Plus de réponses
