我正在开发一个 chrome 扩展,该扩展需要将位置固定的 iframe 插入某些网页的顶部。我无法控制将要修改的页面。目前我可以插入 iframe 但它覆盖了一些页面,但我希望能够为它保留空间。问题是当我向页面主体添加边距或填充时,页面上的其他固定元素与它们的预期位置不一致。
如何使用 javascript 注入一个元素,我可以 100% 确定它会显示在页面顶部,并且不会在其下隐藏任何内容,或者在其他任何地方弄乱位置?
我正在开发一个 chrome 扩展,该扩展需要将位置固定的 iframe 插入某些网页的顶部。我无法控制将要修改的页面。目前我可以插入 iframe 但它覆盖了一些页面,但我希望能够为它保留空间。问题是当我向页面主体添加边距或填充时,页面上的其他固定元素与它们的预期位置不一致。
如何使用 javascript 注入一个元素,我可以 100% 确定它会显示在页面顶部,并且不会在其下隐藏任何内容,或者在其他任何地方弄乱位置?
循环遍历固定元素并将“top”属性增加等于插入元素高度的量。
var myTop;
$('body div').each(function(){
if($(this).css('position')=='fixed'){
myTop = $(this).css('top');
$(this).css('top',mytop + 100);
};
});
我很确定你必须做一些研究和调整才能让它 100% 正常工作。例如,“body div”选择器只会将固定 div 向下移动 100 像素。您可以在这里查看更多信息:
尽管只是为了警告您,这在某些页面上可能是一个缓慢的过程。其他人可能有更好的方法。
如何应用于 body -webkit-transform: translateY(*your_block_height*px)
,然后将您的 iframe 作为第一个孩子添加到 body 并应用-webkit-transform: translate(-*your_block_height*px)