Creating an IFRAME using JavaScript

Question

I have a webpage hosted online and I would like it to be possible that I could insert an IFRAME onto another webpage using some JavaScript.

How would this be the best way possible, that I just add my webpage URL to the JavaScript and that it work on all browsers?

Thanks

Presumably both pages are yours? You want to insert YourSiteA into an iframe within YourSiteB? — beeglebug
– beeglebug, Commented Jan 4, 2012 at 12:09

radiovisual · Accepted Answer · 2016-05-11 14:46:51Z

131

You can use:

<script type="text/javascript">
    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);
    }
</script>

also check basics of the iFrame element

edited May 11, 2016 at 14:46

radiovisual

6,4681 gold badge30 silver badges42 bronze badges

answered Jan 4, 2012 at 11:58

Hemant Metalia

30.8k18 gold badges77 silver badges93 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Sparlarva Over a year ago

I get document is not defined when I try and use this?

SteffPoint Over a year ago

@Sparlarva: I guess you aren't in the HTML DOM context then.

rxgx · Accepted Answer · 2024-04-08 23:36:52Z

6

It is better to process HTML as a template than to build nodes via JavaScript (HTML is not XML after all.) You can keep your IFRAME's HTML syntax by using a template that can be append the template's contents into another DIV.

<div id="placeholder"></div>

<template id="iframeTemplate">
    <iframe src="...">
        <!-- replace this line with your content -->
    </iframe>
</template>

<script>
  var placeholder = document.getElementById("placeholder");
  var template = document.getElementById("iframeTemplate");
  placeholder.appendChild(template);
</script>

edited Apr 8, 2024 at 23:36

answered Jan 4, 2012 at 12:10

rxgx

5,1682 gold badges37 silver badges43 bronze badges

4 Comments

David Cook Over a year ago

I haven't seen a script[type=text/html] before; is there any difference doing this as opposed to a div[style=display:none] ?

Christopher Grigg Over a year ago

@David Cook the syntax you mentioned are for different purposes entirely. :)

Timo Over a year ago

Can you please give a full working example as I do not get the idea of template here. I would do it as in the top answer. Why is template better than js generated html? Never read of script[type=text/html] as @DavidCook

rxgx Over a year ago

This is a full working example. I've updated the code to use the new TEMPLATE tag instead of using script[type=text/html].

kolpaja · Accepted Answer · 2021-04-29 09:50:59Z

0

so I tried to put an embed youtube video to my index.html using google console API key, and this is the function that I made:

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 = `<iframe width="560" height="315" src="https://www.youtube.com/embed/${item.id.videoId}" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>`;
        searchResult.appendChild(video);
    });
}

you can still make changes but this puts the embed video by creating a div and putting the iframe as string template literals ...

answered Apr 29, 2021 at 9:50

kolpaja

192 bronze badges

2 Comments

Timo Over a year ago

Why the downvote for the answer that seems to work. Does the function work, what is your experience? Using innerHTML here is probably not as good as using js like

let ifrm = document.createElement("iframe");ifrm.setAttribute("src",'https://www.youtube.com/embed/v123' );ifrm.style.width = "300px";ifrm.style.height = "300px";

Timo Over a year ago

The google yt api link is dead.

Collectives™ on Stack Overflow

Creating an IFRAME using JavaScript

3 Answers 3

2 Comments

4 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

4 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related