將元素插入JavaScript頁面並相應地將頁面向下移動。

我正在研究一個需要將位置固定的iframe插入到某些網頁頂部的chrome擴展。我無法控制將要修改的頁面。目前我可以插入iframe，但它覆蓋了一些頁面，但我希望能夠爲它預留空間。問題是當我爲頁面主體添加邊距或填充時，頁面上的其他固定元素與他們的意圖不一致。將元素插入JavaScript頁面並相應地將頁面向下移動。

如何注入一個JavaScript元素，我可以100％確定它會顯示在頁面的頂部，而不是隱藏它下面的任何東西，或弄亂其他地方的位置？

來源

2012-12-28 CalumMc

如何通過一個框架更換頁面？ – user123444555621

感謝您的回覆，但有些網站並不太熱衷於框架。 – CalumMc

由於我無法控制可能出現的網站，因此可能會出現問題 – CalumMc

如何適用於身體-webkit-transform: translateY(*your_block_height*px)，那麼你的iframe添加到身體的第一個孩子，並應用-webkit-transform: translate(-*your_block_height*px)

來源

2012-12-29 10:29:39

這就是我所做的，謝謝。未來的讀者請注意，鉻中存在一個錯誤，其中-webkit-transform使固定位置「固定」，但我將使用firefox。 – CalumMc

循環遍歷固定元素，並將「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像素。你可以看看這裏的更多信息：

雖然只是提醒你，這可能是某些頁面上一個緩慢的過程。其他人可能有更好的方法。

來源

2012-12-28 18:31:39 Lopsided

謝謝，但我決定採用anton_byrna的css方法，因爲它在瀏覽器中可能會更快。 – CalumMc

將元素插入JavaScript頁面並相應地將頁面向下移動。

回答

相關問題