html - 如何解决 chrome 10 中的 iframe 缩放错误？

Question

供引用:http://code.google.com/p/chromium/issues/detail?id=71937

基本上，问题是如果缩放 iframe，则 iframe 的 contentWindow 的边界会应用两次缩放修饰符。因此，例如，如果您将 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 类似于 0.5 表示 50% 的大小，或者 2 表示两倍大小。它还使用 jQuery。