iframe 缩放宽度问题

Question

我正在使用缩放/缩放来调整 iframe 的大小：

{
-ms-zoom: 0.80;
-moz-transform: scale(0.80);
-o-transform: scale(0.80);
-webkit-transform: scale(0.80);
-o-transform-origin: 0 0;
-moz-transform-origin: 0 0;
-webkit-transform-origin: 0 0;
}

这对我想要的效果很好，但是在调整宽度大小时，它会留下 100% 保持为 -20% 的边距。我理论上可以检测父级的宽度，然后在调整大小后使用 jQuery 来设置它，或者可以缩放内页，但我希望有人能给我一个更优雅的解决方案，不涉及使用 jquery 进行样式设置？

http://jsfiddle.net/ablueman/8uvz0fzf/

[编辑] 类似问题：Scrolling when using css scale

Answer 1

这就是我为实现工作版本所做的事情，我会将其链接到一个滑块，以便您可以放大和缩小（使用 var bob）或者使用响应式 iframe 使其动态化，但这是我目前所拥有的：

<script>
function mainiframe(){
var bob = "0.90";
$('iframe#mainiframe, iframe#injectIframe').contents().find('body').css({
            "margin" : 0,
      "zoom": bob,
            "-moz-transform": "scale(" + bob + ")",
            "-webkit-transform": "scale(" + bob + ")",
            "-o-transform": "scale(" + bob + ")",
            "-o-transform-origin": "0 0",
            "-moz-transform-origin": "0 0",
            "-webkit-transform-origin": "0 0"
    });
};
</script>

然后在文档的正文中。

<button onclick="mainiframe()">Click me</button>

显然，这不会跨域工作，如您所见，我实际上一次缩小了 2 个 iframe。 如果我可以将它链接到具有某种比例的响应式 iframe，我也许可以制作一个具有缩放功能的响应式 iframe，但问题很复杂。

由于 JSfiddles 页面设置，无法完美运行，但是：http://jsfiddle.net/ablueman/w4e8zu52/

[编辑] 带有滑块的新边框：http://jsfiddle.net/ablueman/8uvz0fzf/ 它只影响：

“错误 404 我们真的很抱歉，但没有这样的页面。”

但显示工作正常，显然这不是普通 iframe 页面的问题。

Answer 2

因为通过 css 只能影响 iframe 本身，而不是 iframe 内容（例如iframe body），你不能用 css 做到这一点。话虽如此，您可以通过 javascript 访问 iframe 的内容。使用 jQuery 会是这样的：

$('iframe').contents().find(body).css('zoom', yourvalue);