如何動態定位和瀏覽器的縮放比例的iframe

的問題如何動態定位和瀏覽器的縮放比例的iframe

用戶可以選擇在自己的iframe代碼或URL創建通過粘貼的iframe。當窗口重新調整iframe需要保持定位在頁面的中間和底部時。我已經使iframe保留在頁面的中間和底部。但是，當窗口重新調整大小（用戶放大（150％等）或放大（50％等））時，用戶放大時iframe本身會變大，用戶縮小時會變小。由於我無法定位iframe中的內容，因此我一直在嘗試找出將規模應用於iframe的方法，以使其看起來保持相同的大小和相同的位置。當窗口重新調整大小時，我無法動態計算iframe的縮放比例。

的JavaScript

負載事件

位置

ratio = $('#iframe').width()/($('#iframe').height() + ($('#close_btn')close.length>0 ? 0 : 20)); 


if (window.innerWidth > window.innerHeight) { 
         var width = window.innerWidth/1.5/1.5; 
         $('#iframe_wrapper').css({ 
          width: width + "px", 
          height: window.innerWidth/ratio/1.5 + "px", 
          left: parseInt((window.pageXOffset + window.innerWidth/2) - (width/2)) + "px", 
          top: parseInt(window.innerHeight + window.pageYOffset - window.innerWidth/ratio/1.5/1.5) + "px" 
         });

的iframe

if($('#iframe').length >0){ 

        jQuery.fn.center = function(){ 
         this.css("position","absolute"); 
         this.css("top","60%"); 
         this.css("left","50%"); 
         this.css("margin-top","-"+(this.height()/2)+"px"); 
         this.css("margin-left","-"+(this.width()/2)+"px"); 
         return this;} 

        $('#iframe').center(); 

       $('iframe').css({ 
        '-webkit-transform': 'scale('+(document.body.offsetWidth * scale/initial_width) 
       }); 

       }

當頁面加載初始規模將被設置爲1。我在想做這樣的事情來動態改變窗口重新大小規模的「-webkit-轉變」：「規模（」 + （document.body.offsetWidth * scale/initial_width）。所以如果縮放比例達到150％，那麼比例就會是0.something，如果縮放比例達到50％，那麼比例可能是2.something等.....當然我可以硬編碼的比例，但這隻適用於某些iframe大小（iframe寬度和高度由用戶動態設置）。所以它可能適用於300×50但不是600×100等的iframe。

來源

2013-12-20 elodev

縮放和調整大小是兩個不同的事情。除非雙方都適用，否則請編輯並限制您的問題。 – isherwood

只是放大這個特殊情況..調整大小是爲移動設備@isherwood – elodev

-1

我認爲你過度使用它。只需使用css將iframe的大小設置爲像素值：

iframe { 
    width: 400px; 
    height: 300px; 
}

來源

2013-12-20 17:34:04 Max

我不能這樣做@Max，因爲iframe的大小几乎每次都不同，因爲用戶自己設置尺寸。因此，在iframe插入到dom之前，寬度和高度由用戶設置。我得到的寬度和高度與JavaScript和試圖執行一些計算。 – elodev

如何動態定位和瀏覽器的縮放比例的iframe

回答

相關問題