javascript - 在 div 中制作 iframe，两者均由 Javascript 创建

Question

因此，我正在尝试制作一个小书签，将 iframe 放置在一个 position: fixed 中，这样我就可以在做其他事情的同时玩一些单人纸牌游戏。我听说您不能在 iframe 上设置 position: fixed，这样您就必须将它放在 div 中。(未压缩的 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);

(压缩的 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)}();

我也试过 JQuery(什么也没做)

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>");
});

到目前为止，它所做的只是在游戏页面底部制作一个 iframe，但它不会移动。

Answer 1

在 document.body.appendChild(element2) 中，您将 iframe 添加到页面底部，而不是作为 div 的子元素。

你真的想要:

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