使用具有全頁面縮放功能的瀏覽器，我可以使用該功能來設置iframe的縮放嗎？

我想現在每個瀏覽器都有用戶控制的全頁面縮放功能。無論如何，開發人員可以通過html，css或javascript訪問它嗎？使用具有全頁面縮放功能的瀏覽器，我可以使用該功能來設置iframe的縮放嗎？

我想提供一個iframe，甚至一個正常的幀，並將其設置爲，比方說50％縮放。（理想情況下，相對於包含文檔的當前縮放比例。）

它完全可行嗎？只要它具有現有的功能實現，我不介意它是否爲HTML 5解決方案。即使它是在夜間建造。

我會很高興，如果它有至少WebKit和壁虎和獎金如果三叉戟太工作。

2009-08-21 kch

以下工作在Safari 4.0.2和最新的WebKit每晚。但是，它不適用於谷歌瀏覽器（無論是Windows還是Mac）。

至於Firefox 3.5和IE 8.0，沒有交易。另外，每晚最新的卡米諾都沒有交易。

<style type="text/css" media="screen"> 
    iframe { 
    width : 500px; 
    height : 250px; 
    } 
</style> 

<script type="text/javascript" charset="utf-8"> 
    function setZoom(element, zoom) { 
    element.style.zoom = (zoom || 50) + '%' 
    } 
</script> 

<p>Hello World</p> 

<iframe 
    src = 'http://google.com' 
    onload = "setZoom(this.contentDocument.body)" 
    />

來源

2009-08-21 00:39:05 kch

這是我提供的解決方案，只用JavaScript而不是css語法實現... – Sampson 2009-08-21 00:58:49

嗯，不是真的，因爲你沒有提供任何關於iframe的內容，並且直接在iframe元素上設置縮放（css：iframe {zoom：0.5}）不起作用。所以我不得不在iframe的內容文件中加載後設置它的css。 – kch 2009-08-21 01:10:11

iframe標籤無法縮放，這就是爲什麼我沒有建議將其應用於iframe標籤。 – Sampson 2009-08-21 01:42:11

我能想到的最接近的是CSS3 Zoom：

div.zoom { zoom: 200%; } 

<div class="zoom"> 
    <p>Hello World</p> 
</div>

這不會工作只是將它添加到一個ifarme標籤：

<iframe id="myFrame" class="zoom" /> <!-- doesn't work -->

你必須將其應用於iframe DOM本身內的內容標記，包括BODY或wrapper-div。

除此之外，我不知道如何做到這一點，可以找到很好的支持跨瀏覽器。

來源

2009-08-21 00:10:03 Sampson

任何瀏覽器是否實現這個縮放屬性呢？ – kch 2009-08-21 00:14:57

你的例子在Safari 4中運行，不是FF 3.5。但是，在iframe上設置縮放無效。 – kch 2009-08-21 00:18:56

正如答案中所述，即使CSS3具有此功能，但它不是很好的支持，因此不應該實現... :) – Sampson 2009-08-21 00:25:20

這也可以在FF完成，像這樣：

iframe { 
-moz-transform: scale(0.5, 0.5); /* 50% */ 
}

它的偉大工程！

檢查：https://developer.mozilla.org/en/CSS/-moz-transform

來源

2010-09-18 14:50:02 lepe

這HTML5和工作對我來說CSS3代碼：變焦的IE 6至8，併爲現代瀏覽器的其他變換規模。

#iframe{ 
    zoom: 0.75; 
    -moz-transform: scale(0.75); 
    -moz-transform-origin: 0 0; 
    -o-transform: scale(0.75); 
    -o-transform-origin: 0 0; 
    -webkit-transform: scale(0.75); 
    -webkit-transform-origin: 0 0; }

支持Firefox 3.5及更高版本，Safari 3.1，Chrome 4.0，Opera 10.5。

尋找一個JS或JQuery的解決方案類似this它適用於舊版本的基礎上XY軸偏移和定製功能，跨瀏覽器。

相信路徑是使用xy軸的功能，但不容找到任何預先製作的縮小代碼，把它作爲一個種子。

來源

2011-01-06 02:21:39 Dinamicor

使用具有全頁面縮放功能的瀏覽器，我可以使用該功能來設置iframe的縮放嗎？

回答

相關問題