如何在較小的iframe中呈現完整的網頁？

Question

我有一個定製的內容管理系統。我正在使用CKEditor來更改內容。編輯後點擊「提交」按鈕時，我想要實時預覽網頁。我使用的是iframe，但它顯示水平和垂直滾動條，因爲網頁的大小更大。

我想在特定的維度上查看完整的頁面意味着以更小的尺寸呈現網頁。即使這是一個網頁的形象，我沒有任何問題。

Answer 1

我愛css3please：

<style type="text/css"> 
.box_scale { 
       width:300px; 
      height:300px; 
    -webkit-transform: scale(0.5); /* Saf3.1+, Chrome */ 
    -moz-transform: scale(0.5); /* FF3.5+ */ 
     -ms-transform: scale(0.5); /* IE9 */ 
     -o-transform: scale(0.5); /* Opera 10.5+ */ 
      transform: scale(0.5); 
      filter: progid:DXImageTransform.Microsoft.Matrix(/* IE6–IE9 */ 
        M11=0.9999619230641713, M12=-0.008726535498373935, M21=0.008726535498373935, M22=0.9999619230641713,SizingMethod='auto expand'); 
} 

</style> 

<div class="box_scale"> 
    <iframe width="300" height="300" src="http://example.org"></iframe> 
</div> 

除了選擇規模的唯一的事情是寬度和高度添加到div。當然，您也可以爲轉換起點添加一些規則。另請參閱：https://developer.mozilla.org/en/CSS/transform