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, Jan 04 '12 at 12:09

score 126 · Accepted Answer · edited May 11 '16 at 14:46

126

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 '16 at 14:46

radiovisual

6,298
1
26
41

answered Jan 04 '12 at 11:58

Hemant Metalia

29,730
18
72
91

1

I get document is not defined when I try and use this? – Sparlarva Jan 01 '19 at 17:09
@Sparlarva: I guess you aren't in the HTML DOM context then. – SteffPoint Jul 05 '19 at 13:53

score 4 · Answer 2 · answered Jan 04 '12 at 12:10

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 clean by using a template and then appending the template's contents into another DIV.

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

<script id="iframeTemplate" type="text/html">
    <iframe src="...">
        <!-- replace this line with alternate content -->
    </iframe>
</script>

<script type="text/javascript">
var element,
    html,
    template;

element = document.getElementById("placeholder");
template = document.getElementById("iframeTemplate");
html = template.innerHTML;

element.innerHTML = html;
</script>

I haven't seen a `script[type=text/html]` before; is there any difference doing this as opposed to a `div[style=display:none]` ? — David Cook, Feb 04 '15 at 22:38
@David Cook the syntax you mentioned are for different purposes entirely. :) — Christopher Grigg, Jul 01 '15 at 00:10

score -1 · Answer 3 · answered Apr 29 '21 at 09:50

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 ...

Creating an IFRAME using JavaScript

3 Answers3

Linked

Related