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