Transmettre une valeur à l'iframe à partir d'une fenêtre

Question

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.

Answer 1

Nous pouvons utiliser le concept "postMessage" pour envoyer des données à une iframe sous-jacente à partir de la fenêtre principale.

Pour en savoir plus sur postMessage, cliquez sur le lien suivant ajouter le code ci-dessous dans la page de la fenêtre principale

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

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

ajoutez maintenant le code ci-dessous à l'intérieur du code source de l'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énement pour recevoir l'événement et dans le callback "recevoir", nous imprimerons les données dans la console.

Answer 2

Si vous utilisez angular et une iframe à l'intérieur, vous aurez besoin d'écouter l'iframe pour qu'elle finisse de se charger. Vous pouvez faire quelque chose comme ceci :

         document.getElementsByTagName("iframe")[0].addEventListener('load', () => {
            document.getElementsByTagName("iframe")[0].contentWindow.postMessage(
                {
                    call: 'sendValue',
                    value: 'data'
                },
                window.location.origin)
        })

Vous devrez obtenir l'iframe d'une manière ou d'une autre (il y a de meilleures façons de le faire dans angular) et ensuite attendre qu'elle se charge. Sinon, le listener ne sera pas attaché à l'iframe même si vous le faites à l'intérieur de méthodes de cycle de vie comme ngAfterViewInit()

Answer 3

Jetez un coup d'œil au lien ci-dessous, qui suggère qu'il est possible de modifier le contenu d'une iFrame dans votre page à l'aide de Javascript, bien qu'il soit très probable que vous rencontriez quelques problèmes entre les navigateurs. Si vous y parvenez, vous pouvez utiliser le javascript dans votre page pour ajouter des éléments dom cachés à l'iFrame contenant vos valeurs, que l'iFrame peut lire. Accès au document à l'intérieur d'une iFrame

Answer 4

Une autre façon de faire. À partir de l'iframe, vous pouvez ajouter des récepteurs d'événements et envoyer les événements dans le document parent :

parent.document.addEventListener('iframe-event', (e) => {
    console.log('iframe-event', e.detail);
});

setTimeout(() => {
    console.log('dispatchEvent from iframe');
    const event = new CustomEvent('frame-ready', { detail: 'parent event dispatched from iframe' });
    parent.document.dispatchEvent(event);
}, 1000);

Et à partir du parent, vous pouvez ajouter des récepteurs d'événements et envoyer des événements dans son propre document :

document.addEventListener('frame-ready', (e) => {
        const event = new CustomEvent('iframe-event', { detail: 'iframe event dispatched from parent' });
        document.dispatchEvent(event);
    });

De plus, si vous devez ouvrir ce cadre dans un nouvel onglet, vous pouvez toujours utiliser les événements pour la communication. Depuis votre cadre/onglet :

if (opener) {
        const event = new CustomEvent('frame-ready', { detail: 'parent event dispatched from new tab' });
        opener.document.dispatchEvent(event);
    }

De la part de votre parent/ouvreur :

window.open('my-frame.html', '_blank');

document.addEventListener('frame-ready', (e) => {
    const event = new CustomEvent('iframe-event', { detail: 'iframe event dispatched from parent' });
    document.dispatchEvent(event);
});

Soyez simplement conscient que window.open exposera votre DOM à la page suivante qu'il ouvre, donc si vous l'utilisez pour ouvrir une url tierce, vous devez toujours utiliser rel=noopener pour éviter les problèmes de sécurité :

window.open('third-part-url.html', '_blank', 'noopener');

Answer 5

Dans votre page d'accueil, ajoutez cette ligne

window.postMessage("Hello data from Homepage");

A l'intérieur de votre iframe, ajoutez cette ligne-

window.addEventListener("message", receiveDataFromWeb);

const receiveDataFromWeb=  (data)=> {
    console.log(data);
    //this should print Hello data from Homepage
}