Create an iframe with only javascript - Stack Overflow

admin管理员组

文章数量:1297105

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/level1 and I need to create the iframe with thiswebsite/level2 inside of it).

Have tried creating iframes as follows:

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

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

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./level1 and I need to create the iframe with thiswebsite./level2 inside of it).

Have tried creating iframes as follows:

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

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

• javascript
• iframe

Share Improve this question Follow edited Nov 9, 2016 at 10:26 Mr.X 31.3k2727 gold badges147147 silver badges229229 bronze badges asked Jul 20, 2016 at 13:55 Fred the ManFred the Man 10611 silver badge99 bronze badges 2

• What seems to be your issue? I copy and Pasted the Exact code into a jsfiddle (with a different source) and it worked jsfiddle/yah18c73/1 – 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 pile and run. This is why I was stuck, because my code should have worked. – Fred the Man Commented Jul 20, 2016 at 14:02

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 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);

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./");
        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'.

本文标签： Create an iframe with only javascriptStack Overflow