Comment accéder à parent Iframe à partir de JavaScript
Eh bien, j'ai une IFrame, qui appelle une même page de domaine. Mon problème est que je veux accéder à certaines informations de ce parent Iframe à partir de cette page appelée (à partir de JavaScript). Comment puis-je accéder à cette Iframe?
détails: il y a plusieurs Iframes comme celle-ci, qui peuvent avoir la même page chargée, parce que je suis en train de programmer un environnement Windows. J'ai l'intention de fermer cette Iframe, c'est pourquoi j'ai besoin de savoir qui je doit la fermer de l'intérieur de lui. J'ai un tableau conserver les références à ces Iframes.
EDIT: il iframes sont générés dynamiquement ""
9 réponses
vous pouvez aussi définir le nom et L'ID à des valeurs égales
<iframe id="frame1" name="frame1" src="any.html"></iframe>
ainsi vous pourrez utiliser le code suivant à l'intérieur de la page de l'enfant
parent.document.getElementById(window.name);
appelez simplement window.frameElement
à partir de votre page encadrée.
Si la page n'est pas dans un cadre, alors frameElement
sera null
.
de l'autre côté (obtenir l'élément de fenêtre à l'intérieur d'un cadre est moins trivial) mais par souci d'exhaustivité:
/**
* @param f, iframe or frame element
* @return Window object inside the given frame
* @effect will append f to document.body if f not yet part of the DOM
* @see Window.frameElement
* @usage myFrame.document = getFramedWindow(myFrame).document;
*/
function getFramedWindow(f)
{
if(f.parentNode == null)
f = document.body.appendChild(f);
var w = (f.contentWindow || f.contentDocument);
if(w && w.nodeType && w.nodeType==9)
w = (w.defaultView || w.parentWindow);
return w;
}
je recommande d'utiliser le postMessage API .
dans votre iframe, appelez:
window.parent.postMessage({message: 'Hello world'}, 'http://localhost/');
dans la page vous incluez l'iframe que vous pouvez écouter pour des événements comme celui-ci:
window.addEventListener('message', function(event) {
if(event.origin === 'http://localhost/')
{
alert('Received message: ' + event.data.message);
}
else
{
alert('Origin not allowed!');
}
}, false);
soit dit en passant, il est également possible de faire des appels vers d'autres fenêtres, et pas seulement vers des iframes.
plus d'informations à propos de l'API postMessage sur le Blog de John Resigs ici
vieille question, mais j'ai juste eu ce même problème et trouvé un moyen d'obtenir l'iframe. Il s'agit simplement d'itérer à travers le tableau frames[] de la fenêtre mère et de tester le contenu de chaque fenêtre par rapport à la fenêtre dans laquelle votre code est en cours d'exécution. Exemple:
var arrFrames = parent.document.getElementsByTagName("IFRAME");
for (var i = 0; i < arrFrames.length; i++) {
if (arrFrames[i].contentWindow === window) alert("yay!");
}
ou, en utilisant jQuery:
parent.$("iframe").each(function(iel, el) {
if(el.contentWindow === window) alert("got it");
});
cette méthode sauve l'assignation D'un ID à chaque iframe, ce qui est bon dans votre cas car ils sont dynamiquement créés. Je ne pouvais pas trouver un de manière plus directe, puisque vous ne pouvez pas obtenir l'élément iframe en utilisant window.parent - il va directement à l'élément de fenêtre parent (sauter l'iframe). Donc les passer à travers semble le seul moyen, sauf si vous voulez utiliser des cartes D'identité.
vous pouvez utiliser parent
pour accéder à la page parent. Ainsi pour accéder à une fonction il serait:
var obj = parent.getElementById('foo');
une fois que l'id d'iframe est défini, vous pouvez accéder à iframe à partir du document interne comme indiqué ci-dessous.
var iframe = parent.document.getElementById(frameElement.id);
fonctionne bien dans IE, Chrome et FF.
peut - être juste utiliser
window.parent
dans votre iframe pour obtenir le cadre d'appel / fenêtres. Si vous aviez plusieurs calling frame, vous pouvez utiliser
window.top
essayez ceci, dans votre cadre parent configurez vous IFRAMEs comme ceci:
<iframe id="frame1" src="inner.html#frame1"></iframe>
<iframe id="frame2" src="inner.html#frame2"></iframe>
<iframe id="frame3" src="inner.html#frame3"></iframe>
notez que l'id de chaque image est passé comme une ancre dans le src.
alors dans votre html interne vous pouvez accéder à l'id du cadre dans lequel il est chargé via l'emplacement.hash:
<button onclick="alert('I am frame: ' + location.hash.substr(1))">Who Am I?</button>
alors vous pouvez accéder à parent.document.getElementById () pour accéder à la balise iframe depuis l'intérieur de l'iframe
// just in case some one is searching for a solution
function get_parent_frame_dom_element(win)
{
win = (win || window);
var parentJQuery = window.parent.jQuery;
var ifrms = parentJQuery("iframe.upload_iframe");
for (var i = 0; i < ifrms.length; i++)
{
if (ifrms[i].contentDocument === win.document)
return ifrms[i];
}
return null;
}