Question

供参考：http://code.google.com/p/chromium/issues/detail?id=71937

基本上，问题在于，如果缩放iframe，iframe的contentWindow的边界会将scale修改器应用两次。因此，例如，如果您将100x100 iframe缩放50％（style =“ - webkit-transform：scale（0.5,0.5）;”），则新的iframe边界将为50x50，但contentWindow边界将为25x25。实际内容已正确缩放。

我尝试设置iframe contentWindow的innerHeight / innerWidth，当我能够更新属性时，contentWindow的可见边界没有改变。

欢迎任何欢迎，谢谢！

Answer 1

对于任何在将来偶然发现这个错误的人。我通过将缩放变换应用于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和$ scale对于50％的大小是0.5，或者对于大小的两倍是2。它还使用jQuery。

Answer 2

这是一个使用jQuery（1.4.2）的解决方案。应用的比例可以传递到函数中，然后将相应的反向比例应用于iframe。定位从10.0.648开始的Chrome版本

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'
    });
  }
}

Answer 3

我们目前正在解决此问题，方法是增加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)';

我如何解决chrome 10中的iframe扩展错误？

3 个答案: