CODEWITHSUNDEEP
javascriptjqueryiframebookmarklet
Dat
Dat

Reputation: 33

Making an Iframe Inside a div, Both Created by Javascript

So I'm trying to make a bookmarklet that places an iframe the had a position: fixed so I can play some solitaire while doing something else. I've heard that you can't have a position: fixed on an iframe so that you'll have to put it in a div. (Uncompressed JS.) 

var element = document.createElement("div");
element.style.position = "fixed";
element.style.zIndex = "9999";
element.id = "lc";
var element2 = document.createElement("iframe");
document.body.appendChild(element2);
element2.src = "https://www.google.com/logos/fnbx/solitaire/standalone.html";
element2.height = "300";
element2.width = "400";
document.getElementById('lc').appendChild(element);
(Compressed JS)

javascript:void function(){var e=document.createElement("div");e.style.position="fixed",e.style.zIndex="9999",e.id="lc";var t=document.createElement("iframe");document.body.appendChild(t),t.src="https://www.google.com/logos/fnbx/solitaire/standalone.html",t.height="300",t.width="400",document.getElementById("lc").appendChild(e)}();
I also tried JQuery (Did nothing)

var element = document.createElement("div");
document.createElement("div");
element.style.position = "fixed";
element.style.zIndex = "9999";
element.id = "test";
$(document).ready(function() {
  $("#test").html("<iframe src='https://www.google.com/logos/fnbx/solitaire/standalone.html'></iframe>");
});

So far all it does is just makes an iframe at the bottom of the page with the game, but it doesn't move.

Upvotes: 1

Views: 2668

Answers (1)

cowbert
cowbert

Reputation: 3442

from document.body.appendChild(element2) you are adding the iframe to the bottom of the page, not as a child of the div.

You really want: 

element.appendChild(element2); // appends the iframe (element2) to div (element)
document.body.appendChild(element); // appends the div to the body

Upvotes: 1

Related Questions