Làm cách nào tôi có thể chia tỷ lệ nội dung của iframe?

Làm cách nào tôi có thể chia tỷ lệ nội dung của iframe (trong ví dụ của tôi, đó là trang HTML và không phải là cửa sổ bật lên) trong một trang của trang web của tôi?

Ví dụ: tôi muốn hiển thị nội dung xuất hiện trong iframe ở 80% kích thước ban đầu.

Giải pháp của Kip sẽ hoạt động trên Opera và Safari nếu bạn thay đổi CSS thành:

<style>
    #wrap { width: 600px; height: 390px; padding: 0; overflow: hidden; }
    #frame { width: 800px; height: 520px; border: 1px solid black; }
    #frame {
        -ms-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;
    }
</style>

Bạn cũng có thể muốn chỉ định tràn: ẩn trên #frame để ngăn thanh cuộn.

Tôi tìm thấy một giải pháp hoạt động trong IE và Firefox (ít nhất là trên các phiên bản hiện tại). Trên Safari / Chrome, iframe được thay đổi kích thước thành 75% kích thước ban đầu của nó, nhưng nội dung trong iframe hoàn toàn không được thu nhỏ. Trong Opera, điều này dường như không hoạt động. Điều này cảm thấy một chút bí truyền, vì vậy nếu có một cách tốt hơn để làm điều đó, tôi hoan nghênh các đề xuất.

<style>
#wrap { width: 600px; height: 390px; padding: 0; overflow: hidden; }
#frame { width: 800px; height: 520px; border: 1px solid black; }
#frame { zoom: 0.75; -moz-transform: scale(0.75); -moz-transform-origin: 0 0; }
</style>

...

<p>Some text before the frame</p>
<div id="wrap">
<iframe id="frame" src="test2.html"></iframe>
</div>
<p>Some text after the frame</p>
</body>

Lưu ý: Tôi đã phải sử dụng wrapphần tử cho Firefox. Vì một số lý do, trong Firefox khi bạn giảm tỷ lệ đối tượng xuống 75%, nó vẫn sử dụng kích thước ban đầu của hình ảnh cho lý do bố cục. (Hãy thử xóa div khỏi mã mẫu ở trên và bạn sẽ thấy ý tôi là gì.)

Tôi tìm thấy một số điều này từ câu hỏi này .

Sau khi vật lộn với điều này trong nhiều giờ cố gắng để nó hoạt động trong IE8, 9 và 10, đây là những gì làm việc cho tôi.

CSS bị loại bỏ này hoạt động trong FF 26, Chrome 32, Opera 18 và IE9 -11 kể từ 1/7/2014:

.wrap
{
    width: 320px;
    height: 192px;
    padding: 0;
    overflow: hidden;
}

.frame
{
    width: 1280px;
    height: 786px;
    border: 0;

    -ms-transform: scale(0.25);
    -moz-transform: scale(0.25);
    -o-transform: scale(0.25);
    -webkit-transform: scale(0.25);
    transform: scale(0.25);

    -ms-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    -o-transform-origin: 0 0;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
}

Đối với IE8, hãy đặt chiều rộng / chiều cao khớp với iframe và thêm -ms-zoom vào .wrap container div:

.wrap
{
    width: 1280px; /* same size as frame */
    height: 768px;
    -ms-zoom: 0.25; /* for IE 8 ONLY */
}

Chỉ cần sử dụng phương pháp ưa thích của bạn để trình duyệt đánh hơi để đưa vào CSS một cách có điều kiện, xem Có cách nào để thực hiện CSS có điều kiện cụ thể của trình duyệt trong tệp * .css không? cho một số ý tưởng.

IE7 là một nguyên nhân bị mất vì -ms-zoom không tồn tại cho đến IE8.

Đây là HTML thực tế tôi đã thử nghiệm với:

<div class="wrap">
   <iframe class="frame" src="http://time.is"></iframe>
</div>
<div class="wrap">
    <iframe class="frame" src="http://apple.com"></iframe>
</div>

http://jsfiddle.net/esassaman/PnWFY/

Tôi chỉ thử nghiệm và đối với tôi, không có giải pháp nào khác hoạt động. Tôi chỉ đơn giản đã thử điều này và nó hoạt động hoàn hảo trên Firefox và Chrome, đúng như tôi dự đoán:

<div class='wrap'>
    <iframe ...></iframe>
</div>

và css:

.wrap {
    width: 640px;
    height: 480px;
    overflow: hidden;
}

iframe {
    width: 76.92% !important;
    height: 76.92% !important;
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
}

Điều này quy mô tất cả các nội dung bằng 30%. Tỷ lệ phần trăm chiều rộng / chiều cao của khóa học cần phải được điều chỉnh cho phù hợp (1 / scale_factor).

Theo dõi câu trả lời của lxs : Tôi nhận thấy một vấn đề khi có cả thẻ zoomvà --webkit-transformthẻ cùng một lúc dường như làm nhiễu Chrome (phiên bản 15.0.874.15) bằng cách thực hiện loại hiệu ứng thu phóng kép. Tôi đã có thể khắc phục sự cố bằng cách thay thế zoombằng -ms-zoom(chỉ nhắm mục tiêu tại IE), để Chrome sử dụng chỉ --webkit-transformthẻ và điều đó đã xóa mọi thứ.

Bạn không cần phải bọc iframe bằng một thẻ bổ sung. Chỉ cần đảm bảo rằng bạn tăng chiều rộng và chiều cao của iframe bằng chính số tiền bạn thu nhỏ xuống iframe.

ví dụ: để chia tỷ lệ nội dung iframe thành 80%:

#frame { /* Example size! */
    height: 400px; /* original height */
    width: 100%; /* original width */
}
#frame {
    height: 500px; /* new height (400 * (1/0.8) ) */
    width: 125%; /* new width (100 * (1/0.8) )*/

    transform: scale(0.8); 
    transform-origin: 0 0;
}

Về cơ bản, để có được kích thước iframe tương tự, bạn cần chia tỷ lệ kích thước.

html {thu phóng: 0,4;}? -)

Tôi nghĩ tôi sẽ chia sẻ những gì tôi nghĩ ra, sử dụng phần lớn những gì được đưa ra ở trên. Tôi chưa kiểm tra Chrome, nhưng nó hoạt động trong IE, Firefox và Safari, theo như tôi có thể nói.

Các độ lệch cụ thể và hệ số thu phóng trong ví dụ này hoạt động để thu nhỏ và căn giữa hai trang web trong iframe cho các tab Facebook (chiều rộng 810px).

Hai trang web được sử dụng là một trang wordpress và một mạng ning. Tôi không giỏi lắm với html, vì vậy điều này có thể đã được thực hiện tốt hơn, nhưng kết quả có vẻ tốt.

<style>
    #wrap { width: 1620px; height: 3500px; padding: 0; position:relative; left:-100px; top:0px; overflow: hidden; }
    #frame { width: 1620px; height: 3500px; position:relative; left:-65px; top:0px; }
    #frame { -ms-zoom: 0.7; -moz-transform: scale(0.7); -moz-transform-origin: 0px 0; -o-transform: scale(0.7); -o-transform-origin: 0 0; -webkit-transform: scale(0.7); -webkit-transform-origin: 0 0; }
</style>
<div id="wrap">
    <iframe id="frame" src="http://www.example.com"></iframe>
</div>

Nếu bạn muốn iframe và nội dung của nó mở rộng khi cửa sổ thay đổi kích thước, bạn có thể đặt các điều sau đây cho sự kiện thay đổi kích thước của cửa sổ cũng như sự kiện tải của iframe.

function()
{
    var _wrapWidth=$('#wrap').width();
    var _frameWidth=$($('#frame')[0].contentDocument).width();

    if(!this.contentLoaded)
      this.initialWidth=_frameWidth;
    this.contentLoaded=true;
    var frame=$('#frame')[0];

    var percent=_wrapWidth/this.initialWidth;

    frame.style.width=100.0/percent+"%";
    frame.style.height=100.0/percent+"%";

    frame.style.zoom=percent;
    frame.style.webkitTransform='scale('+percent+')';
    frame.style.webkitTransformOrigin='top left';
    frame.style.MozTransform='scale('+percent+')';
    frame.style.MozTransformOrigin='top left';
    frame.style.oTransform='scale('+percent+')';
    frame.style.oTransformOrigin='top left';
  };

Điều này sẽ làm cho iframe và tỷ lệ nội dung của nó thành 100% chiều rộng của div quấn (hoặc bất kỳ phần trăm nào bạn muốn). Là một phần thưởng bổ sung, bạn không phải đặt css của khung thành các giá trị được mã hóa cứng vì tất cả chúng sẽ được đặt tự động, bạn sẽ chỉ cần lo lắng về cách bạn muốn div div hiển thị.

Tôi đã thử nghiệm điều này và nó hoạt động trên chrome, IE11 và firefox.

Tôi nghĩ bạn có thể làm điều này bằng cách tính chiều cao và chiều rộng bạn muốn với javascript (thông qua document.body.clientWidth, v.v.) và sau đó đưa iframe vào HTML của bạn như sau:

phần tử var = document.getEuityById ("myid");
Element.innerHTML + = "<iframe src = 'http: //www.google.com' height = '200' width = '" + document.body.clientWidth * 0.8 + "' />";

Tôi đã không thử nghiệm điều này trong IE6 nhưng có vẻ như nó hoạt động với những cái tốt :)

Đối với những người bạn gặp khó khăn khi điều này hoạt động trong IE, sẽ rất hữu ích khi sử dụng -ms-zoomnhư được đề xuất bên dưới và sử dụng chức năng thu phóng trên #wrapdiv chứ không phải iframeid. Theo kinh nghiệm của tôi, với zoomchức năng cố gắng chia tỷ lệ div iframe #frame, nó sẽ chia tỷ lệ kích thước iframe chứ không phải nội dung bên trong nó (đó là những gì bạn sẽ làm).

Hình như thế này. Hoạt động với tôi trên IE8, Chrome và FF.

#wrap {
  overflow: hidden;
  position: relative;
  width:800px;
  height:850px;
  -ms-zoom: 0.75;
}

Đây là giải pháp của tôi trên một trang có chiều rộng 890px

#frame { 
overflow: hidden;
position: relative;
width:1044px;
height:1600px;
-ms-zoom: 0.85;
-moz-transform: scale(0.85);
-moz-transform-origin: 0px 0;
-o-transform: scale(0.85);
-o-transform-origin: 0 0;
-webkit-transform: scale(0.85);
-webkit-transform-origin: 0 0; 

}

Giải pháp #wrap #frame hoạt động tốt, miễn là các số trong #wrap gấp #frame nhân với tỷ lệ. Nó chỉ hiển thị một phần của khung được thu nhỏ. Bạn có thể thấy nó ở đây thu nhỏ các trang web và đưa nó vào một dạng giống như pinterest (với plugin jQuery của Woodmark):

http://www.genautica.com/sandbox/woodmark-index.html

Vì vậy, có lẽ không phải là giải pháp tốt nhất, nhưng dường như hoạt động tốt.

<IFRAME ID=myframe SRC=.... ></IFRAME>

<SCRIPT>
    window.onload = function(){document.getElementById('myframe').contentWindow.document.body.style = 'zoom:50%;';};
</SCRIPT>

Rõ ràng là không cố gắng sửa lỗi cha mẹ, chỉ cần thêm kiểu "zoom: 50%" vào cơ thể của đứa trẻ với một chút javascript.

Có thể có thể đặt kiểu của phần tử "HTML", nhưng không thử điều đó.

Nếu html của bạn được tạo kiểu bằng css, có lẽ bạn có thể liên kết các biểu định kiểu khác nhau cho các kích cỡ khác nhau.

Tôi không nghĩ HTML có chức năng như vậy. Điều duy nhất tôi có thể tưởng tượng sẽ làm thủ thuật là thực hiện một số xử lý phía máy chủ. Có lẽ bạn có thể có được một ảnh chụp nhanh của trang web bạn muốn phục vụ, mở rộng nó trên máy chủ và phục vụ nó cho khách hàng. Đây sẽ là một trang không tương tác tuy nhiên. (có thể một bản đồ tưởng tượng có thể có liên kết, nhưng vẫn còn.)

Một ý tưởng khác là có một thành phần phía máy chủ có thể thay đổi HTML. SOrt giống như tính năng zoom firefox 2.0. điều này tất nhiên không phải là phóng to hoàn hảo, nhưng tốt hơn là không có gì.

Ngoài ra, tôi hết ý tưởng.

Như đã nói, tôi nghi ngờ bạn có thể làm điều đó.
Có lẽ bạn có thể chia tỷ lệ ít nhất là chính văn bản, bằng cách đặt một kiểu font-size: 80%;.
Chưa được kiểm tra, không chắc chắn nó hoạt động và sẽ không thay đổi kích thước hộp hoặc hình ảnh.