20

我希望我的 chrome 扩展能够在激活时在任何页面的右侧注入 300px 侧边栏。我正在寻找将整个页面限制为 document.body.clientWidth - 300 的最佳方法，从而将 300px 留在我的侧边栏的右侧。我当前注入的侧边栏附加到 document.body 并具有如下样式：

width:300px
position: fixed
top: 0px
right: 0px
height:500px

我需要一种方法来防止现有页面元素渗入我的侧边栏。我希望有一种方法可以欺骗现有元素，使其认为它们正在渲染到比实际窗口窄 300 像素的浏览器客户端，从而为我的侧边栏留出空间，但我还没有找到任何简单的方法来做到这一点。 .

4

4 回答 4

14

我相信这更容易。首先在 body 上添加 padding，为侧边栏腾出空间。然后，创建一个包含侧边栏的 div。使用带有固定定位的 CSS 将 div 相对于页面的右侧和顶部定位。同时设置侧边栏 div 的高度和宽度。

代码（使用 JQuery）：

  var sidebar;
  $('body').css({
    'padding-right': '350px'
  });
  sidebar = $("<div id='sidebar'></div>");
  sidebar.css({
    'position': 'fixed',
    'right': '0px',
    'top': '0px',
    'z-index': 9999,
    'width': '290px',
    'height': '100%',
    'background-color': 'blue'  // Confirm it shows up
  });
  $('body').append(sidebar);
于 2012-08-07T00:47:19.800 回答
12

更新

对于任何使用谷歌搜索的人，对其进行大修以反映我在应用程序中实际使用的内容，使用 jQuery，有更多的保护措施，并且更加尊重当前页面的 css。

//height of top bar, or width in your case
var height = '30px';

//resolve html tag, which is more dominant than <body>
  var html;
  if (document.documentElement) {
    html = $(document.documentElement); //just drop $ wrapper if no jQuery
  } else if (document.getElementsByTagName('html') && document.getElementsByTagName('html')[0]) {
    html = $(document.getElementsByTagName('html')[0]);
  } else if ($('html').length > -1) {//drop this branch if no jQuery
    html = $('html');
  } else {
    alert('no html tag retrieved...!');
    throw 'no html tag retrieved son.';
  }

//position
if (html.css('position') === 'static') { //or //or getComputedStyle(html).position
  html.css('position', 'relative');//or use .style or setAttribute
}

//top (or right, left, or bottom) offset
var currentTop = html.css('top');//or getComputedStyle(html).top
if (currentTop === 'auto') {
  currentTop = 0;
} else {
  currentTop = parseFloat($('html').css('top')); //parseFloat removes any 'px' and returns a number type
}
html.css(
  'top',     //make sure we're -adding- to any existing values
  currentTop + parseFloat(height) + 'px'
);

你几乎已经完成。您已经设置了页面 html 的样式。您可能已经注意到页面中的 css 会影响您的内容。您可以通过将其包含在 iframe 中来解决此问题：

var iframeId = 'someSidebar';
if (document.getElementById(iframeId)) {
  alert('id:' + iframeId + 'taken please dont use this id!');
  throw 'id:' + iframeId + 'taken please dont use this id!';
}
html.append(
  '<iframe id="'+iframeId+'" scrolling="no" frameborder="0" allowtransparency="false" '+
    'style="position: fixed; width: 100%;border:none;z-index: 2147483647; top: 0px;'+
           'height: '+height+';right: 0px;left: 0px;">'+
  '</iframe>'
);
document.getElementById(iframeId).contentDocument.body.innerHTML =
  '<style type="text/css">\
    html, body {          \
      height: '+height+'; \
      width: 100%;        \
      z-index: 2147483647;\
    }                     \
  </style>                \
  <p>UNSTYLED HTML!</p>';

是的，您必须在设置 innerHTML 之前附加 iframe

您应该能够复制/粘贴和编辑它，并成为您的一员！

于 2012-04-11T06:52:35.907 回答
1

感谢 Devin 提供的示例代码。与其他答案不同，这似乎有效。我实际上使用这段代码编写了一个扩展，旨在自己解决这个问题。但是，在某些 Gmail 标签中使用它时遇到了困难。

您可以查看我的 hacked-together 代码，了解 iframe 侧边栏的工作示例，该侧边栏不只是覆盖在页面上。但是，我还没有能够克服前面提到的 Gmail 错误，尽管这对您来说可能不是问题。我只是通过 iframe src 引入内容，而不是使用document.getElementById(iframeId).contentDocument.body.innerHTML.

于 2015-01-05T13:53:12.987 回答
0

好吧，您应该只将z-index属性添加到您的 css 中，将width设置为 300px 并删除right。

但我希望你能改变主意:)

于 2012-04-11T06:09:21.760 回答