HTML5 Redimensionner l'iframe de document de niveau supérieur à l'intérieur d'un iframe imbriqué

Le problème peut sembler difficile à comprendre, donc je vais l'illustrer le mieux possible.

Dites que j'ai le corps index.html suivant:

<iframe name="parent"></iframe> 

Et à l'intérieur de l'iframe parent , je charge le corps de la page suivante:

 <iframe name="nested-navigation"></iframe> <iframe name="nested-parent"></iframe> 

Et à l'intérieur de l' nested-parent ancré, je charge une autre page. À l'intérieur de cette autre page, je dois en quelque sorte accéder à l'iframe parent documents de niveau supérieur (index.html), afin que je puisse redimensionner la taille de son contenu à l'aide de la taille de contenu iframe nested-parent .

J'ai redimensionné correctement la hauteur des iframes parent de index.html en utilisant le contenu chargé du corps des pages imbriquées. Cependant, lors de la prochaine imbrication, je ne parviens pas à accéder au contexte du document index.html et je ne parviens donc pas à obtenir l'élément iframe parent .

J'ai besoin d'aide pour déterminer comment atteindre l'index de l'index.html. Comment ferais-je cela?

La page est en ligne et les effets peuvent être visualisés ici:

Www.ngeneersinc.com

Si vous cliquez sur le lien de navigation Projects , il va charger correctement la page et redimensionner l'iframe parent . Malheureusement, lorsque vous cliquez sur le lien de navigation Ngen intérieur de cette page imbriquée, l'iframe de niveau supérieur (index.html) n'est pas redimensionné et le contenu est coupé, quelle que soit la hauteur définie dans la page précédente.

MODIFIER:

Essentiellement, j'essaie de faire ce qui suit dans ma fonction javascript:

 var e = document.getElementById("nested-parent").contentWindow; // which is OK var x = e.contentWindow; // which is 'undefined' because I lost the context of the index.html document 

Vous pouvez utiliser le plugin jQuery suivant pour accomplir ceci:
http://benalman.com/projects/jquery-postmessage-plugin/

Ensuite, ajoutez le code suivant à un fichier javascript que vous incluez dans le document iframe et la fenêtre parent:

 var iFrames = []; var iFrameCounter = 0; // Get the parent page URL as it was passed in, for browsers that don't support // window.postMessage var parent_url = decodeURIComponent(document.location.hash.replace(/^#/, '')); // The first param is serialized using $.param (if not a string) and passed to the // parent window. If window.postMessage exists, the param is passed using that, // otherwise it is passed in the location hash (that's why parent_url is required). // The second param is the targetOrigin. function SetHeight() { var id = Number(parent_url.replace(/.*#(\d+)(?:&|$)/, '$1')); $.postMessage({ if_height: $(document).outerHeight(true), id: id }, parent_url, parent); }; // Adds the iframe for the given url to the given container function CreateFrame(container, url) { $(function () { // Pass the parent page URL into the Iframe in a meaningful way var src = url + '#' + encodeURIComponent(document.location.href + "#" + iFrameCounter); // Append the iFrame into the DOM. var html = '<iframe id="iFrame' + iFrameCounter + '" src="' + src + '" width="100%" scrolling="no" frameborder="0">Your browser lacks support for iFrames!<\/iframe>'; iFrames[iFrameCounter] = { id: "iFrame" + iFrameCounter, container: container, if_height: 0 }; // Add iFrame to DOM $(container).append($(html)); iFrameCounter++; }); } $(function () { // Setup a callback to handle the dispatched MessageEvent event. In cases where // window.postMessage is supported, the passed event will have .data, .origin and // .source properties. Otherwise, this will only have the .data property. $.receiveMessage(function (e) { // Get frameId var id = Number(e.data.replace(/.*id=([\d-]*).*/, '$1')); var frame = iFrames[id]; // Get the height from the passsed data. var h = Number(e.data.replace(/.*if_height=([\d-]*).*/, '$1')); if (!isNaN(h) && h > 0 && h !== frame.if_height) { // Height has changed, update the iframe. $("#" + frame.id).css("height", (frame.if_height = h)); $("#" + frame.id).css("min-height", (frame.if_height = h)); $("#" + frame.id).css("max-height", (frame.if_height = h)); // Also update the parent element of the iframe. $("#" + frame.id).parent().css("height", (frame.if_height = h)); $("#" + frame.id).parent().css("min-height", (frame.if_height = h)); $("#" + frame.id).parent().css("max-height", (frame.if_height = h)); } }); }); 

Ensuite, utilisez le code suivant pour créer l'iframe dans la fenêtre parentale:

 <script type="text/javascript"> $(document).ready(function () { CreateFrame("#someiFrameContainer", url); }); </script> <div id="someiFrameContainer"></div> 

Ensuite, chaque fois que la hauteur du document à l'intérieur des modifications iFrame appelle cette fonction à partir de la page iFrame:

 SetHeight(); 

Cela entraînera que la page iframe envoie un message contenant sa nouvelle hauteur totale à sa fenêtre parent (prend en charge le domaine interdisciplinaire), qui va capturer le message et mettre à jour la taille de l'iframe. Cela nécessite que la fenêtre parent inclue également le fichier de script ci-dessus, car ce fichier enregistre les événements et les fonctions pour traiter ces messages automatiquement lors de l'utilisation de CreateFrame();