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/

[edit]类似问题： 使用CSS缩放时滚动

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