Création d'un IFRAME en utilisant JavaScript

Question

J'ai une page web hébergée en ligne et j'aimerais qu'il soit possible que je puisse insérer un IFRAME sur une autre page web en utilisant un peu de JavaScript.

Quel serait le meilleur moyen possible, que j'ajoute simplement l'URL de ma page web au JavaScript et que cela fonctionne sur tous les navigateurs?

Merci

Answer 1

Vous pouvez utiliser :

    function prepareFrame() {
        var ifrm = document.createElement("iframe");
        ifrm.setAttribute("src", "http://google.com/");
        ifrm.style.width = "640px";
        ifrm.style.height = "480px";
        document.body.appendChild(ifrm);
    }

consultez également les bases de l'élément iFrame

Answer 2

Il vaut mieux traiter le HTML comme un modèle que de construire des nœuds via JavaScript (après tout, le HTML n'est pas du XML.) Vous pouvez conserver la syntaxe HTML de votre IFRAME en utilisant un modèle qui peut être ajouté le contenu du modèle dans un autre DIV.

  var placeholder = document.getElementById("placeholder");
  var template = document.getElementById("iframeTemplate");
  placeholder.appendChild(template);

Answer 3

Alors j'ai essayé de mettre une vidéo youtube intégrée dans mon index.html en utilisant la clé API de Google Console, et voici la fonction que j'ai créée:

const searchVideos = async (key, search, maxResVideos) => {
    const config = { params: { key: key, q: search } }
    let res = await axios.get(`https://www.googleapis.com/youtube/v3/search?part=snippet&type=video&maxResVideos=${maxResVideos}`, config);
    console.log('res:', res.data.items);
    res.data.items.forEach(item => {

        const video = document.createElement('div');
        video.innerHTML = ``;
        searchResult.appendChild(video);
    });
}

vous pouvez toujours apporter des modifications mais ceci insère la vidéo intégrée en créant une div et en plaçant l'iframe en tant que modèles de chaînes de caractères ...