20

Chrome拡張機能を有効にすると、ページの右側に300pxのサイドバーを挿入できるようにしたいと思います。ページ全体をdocument.body.clientWidth-300に制限して、サイドバーの右側に300pxを残すための最良の方法を探しています。現在挿入しているサイドバーはdocument.bodyに追加され、次のようなスタイルになります。

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

既存のページ要素がサイドバーに流れ込むのを防ぐ方法が必要です。既存の要素をだまして、実際のウィンドウより300px狭いブラウザクライアントにレンダリングしていると思い込ませて、サイドバー用のスペースを残しておく方法があることを期待していましたが、簡単な方法は見つかりませんでした。 。

4

4 に答える 4

14

これは簡単だと思います。まず、ボディにパディングを追加して、サイドバー用のスペースを作ります。次に、サイドバーを含む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タブで使用すると問題が発生しました。

ページに単純にオーバーレイされていないiframeサイドバーの実用的な例については、私のハッキングされたコードをご覧ください。ただし、これはあなたにとって問題ではないかもしれませんが、私はまだ前述のGmailのバグを克服することができていません。でコンテンツを挿入するのではなく、単にiframesrcを介してコンテンツを取り込むだけでしたdocument.getElementById(iframeId).contentDocument.body.innerHTML。

于 2015-01-05T13:53:12.987 に答える
0

さて、あなたはちょうどあなたのcssにz-indexプロパティを追加し、幅を300pxに設定し、そして右を削除するべきです。

しかし、私はあなたがあなたの心を変えることを願っています:)

于 2012-04-11T06:09:21.760 に答える