2011-03-01 78 views
2

僅供參考:http://code.google.com/p/chromium/issues/detail?id=71937如何解決chrome 10中的iframe縮放問題?

基本上,問題是如果您縮放iframe,則iframe的contentWindow的邊界將得到應用兩次的縮放修改器。因此,例如,如果您將100x100的iframe縮放50%(style =「 - webkit-transform:scale(0.5,0.5);」),則新的iframe邊界將爲50x50,但contentWindow邊界將爲25x25。實際內容正確縮放。

我試着設置iframe contentWindow的innerHeight/innerWidth,而當我能夠更新屬性時,contentWindow的可見邊界沒有改變。

歡迎任何輸入,謝謝!

+0

可能重複[如何縮放iframe的內容?](http://stackoverflow.com/questions/166160/how-can-i-scale-the-content-of-an-iframe) – rds 2014-04-09 09:06:43

回答

0

我們目前正在通過增加iframe的大小,使內部內容窗口是iframe的原始大小,然後重新定位iframe以使內容窗口與iframe的原始位置匹配,從而解決此問題,然後剪切iframe,以便只有內容窗口可見。

所以,在我們的情況下,代碼是一樣的東西:

var chromefix = 7; 
var scale = .147; 
frm.style.webkitTransform = 'scale(' + scale +',' + scale +')'; 
frm.style.width = basew/scale*chromefix + "px"; 
frm.style.height = baseh/scale*chromefix + "px"; 
frm.style.left = (basex - ((basew/scale-basew)/2)*chromefix) + "px"; 
frm.style.top = (basey - ((baseh/scale-baseh)/2)*chromefix) + "px"; 
frm.style.clip= 'rect(0px,'+basew/scale+'px,'+baseh/scale+'px, 0px)'; 
1

下面是一個使用jQuery的(1.4.2)的解決方案。應用的比例可以傳遞給函數,然後將適當的反向比例應用於iframe。目標版本的Chrome以10.0.648開頭

function iframeFix (scale) { 
    // Chrome 10 preview fix 
    // See: http://code.google.com/p/chromium/issues/detail?id=71937 
    // 
    // iframe is scaled twice in this version of Chrome. 
    // Fix is to apply a reverse scale on the iframe 
    var chrome_preview_bug_version = "Chrome/10.0.648"; 
    if (navigator.userAgent.indexOf(chrome_preview_bug_version) > -1) { 
    var scale_fix = Math.sqrt(1/scale); 
    $('iframe').css({ 
     '-webkit-transform': 'scale(' + scale_fix + ')', 
     '-webkit-transform-origin': '0 0' 
    }); 
    } 
} 
2

對於任何人在未來絆倒這個錯誤。我通過將縮放轉換應用於iframe中的文檔的html節點而不是iframe本身來解決此問題。我用下面的代碼:

$(function() { 
    $("#iframe_name").load(function() { 
     $("#iframe_name").contents().find('html').css('-moz-transform', 'scale(<?=$scale?>)'); 
     $("#iframe_name").contents().find('html').css('-moz-transform-origin', 'left top'); 
     $("#iframe_name").contents().find('html').css('-webkit-transform', 'scale(<?=$scale?>)'); 
     $("#iframe_name").contents().find('html').css('-webkit-transform-origin', 'left top'); 
     $("#iframe_name").contents().find('html').css('transform', 'scale(<?=$scale?>)'); 
     $("#iframe_name").contents().find('html').css('transform-origin', 'left top'); 
     if (navigator.appVersion.match(/MSIE/)) { 
      $("#iframe_name").contents().find('html').css('zoom', '<?=(100*$scale)?>%'); 
     } 
    }); 
}); 

這是使用PHP和$規模是像0.5的大小的50%,或2倍的大小。它也使用jQuery。