javascript - 在顶部创建一个 div 将所有其他内容向下推

Question

我正在编写一个 Firefox 插件，它在页面顶部显示一个 div，并将所有其他内容向下推。我尝试将其放在 head 标签之前，但似乎不起作用。

我的代码:

var allDivs = document.getElementsByTagName('div');
var headTag = document.getElementsByTagName('head')[0];

if (allDivs.mainplugindiv)
{
  alert("!!! Plugin LLIBrowser is running !!!");
}
else
{
  var div = document.createElement('div');
  div.id='mainplugindiv';
  div.style.position = 'absolute';
  div.style.zIndex = '100';
  div.style.width = '100%';
  div.style.height = '150px';
  div.style.background = '#313192';
  div.style.color = 'white';
  div.innerHTML="<script type=\"text/javascript\"   src="+self.options.angularLib+"></script>"+
"<script type=\"text/javascript\" src="+self.options.angularApp+"></script>"+
  "<form style=\"margin: 0 auto; left: 10px; top: 50px; width: 98%;align: middle; visibility: visible\">"+
    "<label for=\"video\" style=\"color: white\"> <input type=\"checkbox\" checked=\"checked\" name=\"video\" value=\"video\" id=\"video\" /> Video</label>"+
    "<label for=\"forum\" style=\"color: white\"> <input type=\"checkbox\" checked=\"checked\" name=\"forum\" value=\"forum\" id=\"forum\" /> Forum</label>"+
    "<img src="+self.options.closeImg+" alt=\"Help\" style=\"width:20px;height:20px;\" align=right onclick=\"var youSure=confirm('Are you sure you want to close the plugin?'); if (youSure){var element = document.getElementById('mainplugindiv');element.outerHTML = '';delete element;}\">"+
    "<img src="+self.options.helpImg+" alt=\"Close\" style=\"width:20px;height:20px;\" align=right onclick=\"alert('LLIBrowser')\">"+
  "</form>"+
  "<div style=\"margin: 0 auto; left: 10px; top: 50px; width: 98%; height: 50%; align: middle; background-color:#75bbf7; visibility: visible\">"+
    "<div ng-show=\"tab == 1\">"+
      "<form>"+
        "<h3 style=\"color: white; align: center\">Video1 Video2 Video3 Video4</h3>"+
      "</form>"+
    "</div>"+
    "<div ng-show=\"tab == 2\">"+
      "<form>"+
        "<h3 style=\"color: white; align: center\">Forum1 Forum2 Forum3 Forum4</h3>"+
      "</form>"+
    "</div>"+
  "</div>"+
  "<form style=\"margin: 0 auto; left: 10px; top: 50px; width: 98%;align: middle; background-color:#313192; visibility: visible\">"+
  "<a href=\"#video\" style=\"color: white; background-color: #75bbf7; height: 15px; padding: 5 auto\" ng-click=\"tab = 1\">Video</a>"+
  "<a href=\"#forum\" style=\"color: white; background-color: #313192; height: 15px; padding: 5 auto\" ng-click=\"tab = 2\">Forum</a>"+
  "</form>";
  headTag.parentNode.insertBefore(div, headTag);

谢谢!

Answer 1

不要将位置设置为绝对，而是将其设置为相对并清除两侧。

div.style.position = 'relative';
div.style.clear = 'both';

这应该有效。

编辑:不要附加在 head 标签中，而是将其设为 yourbody 的第一个子标签

document.body.insertBefore(div,body.firstChild);