Javascript/CSS: đặt (firefox) mức thu phóng của khung nội tuyến?

Question

Tôi muốn tạo một trang có nhiều iframe hiển thị các trang khác nhau - một loại "duyệt nhiều trang cạnh nhau" loại điều. Vấn đề là khi làm như vậy, các khung nhìn khá nhỏ và tôi chỉ có thể nhìn thấy góc trên cùng bên trái của mỗi trang.

Có cách nào để đặt khung nội tuyến để thực hiện phóng to thu nhỏ của firefox (ctrl-minus) một vài lần sao cho toàn bộ trang hiển thị? Tôi không đặc biệt quan tâm liệu văn bản có đọc được hay không, chỉ khi tôi về cơ bản có thể xem trang trông như thế nào.

Tôi không cần điều này là trình duyệt chéo (vì mục đích của tôi, nó chỉ cần hoạt động trong firefox mới nhất) mặc dù rõ ràng giải pháp trình duyệt chéo sẽ thích hợp hơn vì bất kỳ ai khác cần điều này và tình trạng lộn xộn qua câu hỏi này.

Answer 1

Bạn có thể áp dụng css biến để iframe:

iframe { 
    -moz-transform: scale(0.25, 0.25); 
    -webkit-transform: scale(0.25, 0.25); 
    -o-transform: scale(0.25, 0.25); 
    -ms-transform: scale(0.25, 0.25); 
    transform: scale(0.25, 0.25); 
    -moz-transform-origin: top left; 
    -webkit-transform-origin: top left; 
    -o-transform-origin: top left; 
    -ms-transform-origin: top left; 
    transform-origin: top left; 
    border: solid #ccc 10px; 
} 

http://jsfiddle.net/6QMcX/

Thuộc tính nguồn gốc chuyển đổi cho phép nó được thu nhỏ mà không thay đổi vị trí của nó.

Điều này phù hợp với Webkit, Opera, FF và IE9 (chưa được kiểm tra). Văn bản trông tuyệt vời và vẫn dễ đọc ở kích thước rất nhỏ.

Answer 2

tôi nhận kết quả phù hợp như thế này (chỉ được thử nghiệm trong Chromium):

CSS:

<style> 
#iframe { 
    -moz-transform: scale(0.25, 0.25) translate(-150%, -150%); 
    -webkit-transform: scale(0.25, 0.25) translate(-150%, -150%); 
    -o-transform: scale(0.25, 0.25) translate(-150%, -150%); 
    transform: scale(0.25, 0.25) translate(-150%, -150%); 
} 
#wrapper { 
    width: 256px; 
    height: 230px; 
} 
</style> 

HTML:  

<div id="wrapper"> 
    <iframe id="iframe" width="1024" height="920" scrollbars="no"></iframe> 
</div> 

Có lẽ điều này giúp.