如何解决chrome 10中的iframe缩放问题？

仅供参考：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的可见边界没有改变。

欢迎任何输入，谢谢！

来源

2011-03-01 ajh158

可能重复[如何缩放iframe的内容？]（http://stackoverflow.com/questions/166160/how-can-i-scale-the-content-of-an-iframe） – rds 2014-04-09 09:06:43

我们目前正在通过增加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)';

来源

2011-03-10 13:36:32 ajh158

下面是一个使用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' 
    }); 
    } 
}

来源

2011-03-21 09:10:54

对于任何人在未来绊倒这个错误。我通过将缩放转换应用于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。

来源

2011-08-04 13:22:04 Tim

如何解决chrome 10中的iframe缩放问题？

回答

相关问题