Create an iframe with only javascript

Question

I have been struggling on one of those programing challenge sites for a while. It has a console type thing that lets me enter javascript and press a run button. I need to create an iframe inside of that webpage with another webpage inside of it (for example, im on thiswebsite.com/level1 and I need to create the iframe with thiswebsite.com/level2 inside of it).

Have tried creating iframes as follows:

document.getElementById('someDiv').innerHTML = '<iframe src="thissite.com/level2/" height= 300 width=400>';

However it does not run when I try this, is there an alternative way? Thanks.

What seems to be your issue? I copy and Pasted the Exact code into a jsfiddle (with a different source) and it worked jsfiddle.net/yah18c73/1 — The Dark Knight
– The Dark Knight, Commented Jul 20, 2016 at 14:00
The site simply would not run it, I assume it was looking for another solution, the answer provided below did compile and run. This is why I was stuck, because my code should have worked. — Fred the Man
– Fred the Man, Commented Jul 20, 2016 at 14:02

murli2308 · Accepted Answer · 2016-07-20 14:06:12Z

6

Use createElement method of document

var a = document.createElement('iframe');
a.src = "your path will go here"; //add your iframe path here
a.width = "1000";
a.height = "500";
document.querySelector('body').appendChild(a)

I just append the iframe to body. To append it to someDiv replace last line with below code

document.getElementById('someDiv').appendChild(a);

edited Jul 20, 2016 at 14:06

answered Jul 20, 2016 at 13:58

murli2308

3,0224 gold badges32 silver badges47 bronze badges

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

3 Comments

Fred the Man Over a year ago

Is there a way to set the size to this? Also this answer does run, thanks.

murli2308 Over a year ago

Wc. edited the answer check. you can specify any property which is valid html attribute. I will suggest to add class name also

Mr.X Over a year ago

a.width and a.height seems to be doing that only

Mr.X · Accepted Answer · 2016-07-20 14:04:50Z

1

I doubt that the site doesn't allow you to create iframes.

Like, if you try the below code in your Console

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

    //call it
    prepareiFrame()

Stackoverflow will throw the below error:

Refused to display 'https://www.google.co.in/?gfe_rd=cr&ei=OoWPV7agCuHt8wf3v6egDA' in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'.

answered Jul 20, 2016 at 14:04

Mr.X

31.7k27 gold badges150 silver badges231 bronze badges

Collectives™ on Stack Overflow

Create an iframe with only javascript

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related