1. Trang chủ
  2. Câu hỏi và trả lời
  3. Làm cách nào để thu phóng nội dung IFRAME mà không cần sử dụng bộ khung?

Làm cách nào để thu phóng nội dung IFRAME mà không cần sử dụng bộ khung?

2011-08-26 42 views
8

Tôi chỉ cần thu phóng nội dung khung. Ở đây trong trang web của tôi, tôi đã sử dụng zoom: 0.75; height: 520px; width: 800px;. Nếu tôi tăng giá trị zoom, điều đó có nghĩa là kích thước khung hình sẽ tăng lên.Làm cách nào để thu phóng nội dung IFRAME mà không cần sử dụng bộ khung?

<HTML> 
<HEAD> 
    <TITLE> New Document </TITLE> 
<STYLE> 

#frame { width: 800px; height: 520px; border: 1px solid black; } 
#frame { zoom: 0.75; -moz-transform: scale(0.75); -moz-transform-origin: 0 0; } 
</STYLE> 
</HEAD> 

<BODY> 

    <IFRAME id="frame" src="http://www.google.com"></IFRAME> 

    </BODY> 

</HTML>

Trong trang HTML mẫu ở trên, tôi muốn thu phóng nội dung của IFRAME mà không thay đổi kích thước của IFRAME đó.

Nguồn

2011-08-26 Baskaran

+0

thể trùng lặp của [Làm thế nào tôi có thể mở rộng nội dung của một iframe?] (Http://stackoverflow.com/questions/166160/how-can-i-scale-the-content-of -an-iframe) – bummi

Trả lời

3

Đối với điều này, bạn có thể cần phải sử dụng javascript.

Có một plugin zoom cho jQuery đây: http://css-tricks.com/examples/AnythingZoomer/

Bạn có thể thay đổi iframe src đến một trang web địa phương, đặt một div trong khung và sử dụng tải jquery() (ví dụ frame.htm.) chức năng tải nội dung vào khung:

<script type="text/javascript"> 
    $(document).ready(function() { 
      $("#loadGoogle").load("pageToLoad.html", function(){ 
      //loaded 
      }); 
    }) 
</script> 
<div id="loadGoogle" style="width: 100%; height: 100%;"></div>

Sau đó, sử dụng plugin jquery zoom bên trong khung để thu phóng nội dung.

<script type="text/javascript"> 
    $("#loadGoogle").anythingZoomer({ 

     expansionSize: 30, 
     speedMultiplier: 1.4 

    }); 
</script>

Nguồn

2011-08-26 12:15:02 Dan

+0

mà không cần jquery làm sao tôi có thể làm được? – Baskaran

+1

Vấn đề là bạn đang yêu cầu iframe thu phóng chứ không phải nội dung của khung nội tuyến. Bằng cách sử dụng CSS "#frame {zoom: 0.75 ..." bạn sẽ không nhận được kết quả mong muốn. – Dan

14

Tôi đã sử dụng một kịch bản trong facebook của tôi và nó làm việc trong IE và Firefox

<style type="text/css"> 
#iframe { 
    zoom: 0.15; 
    -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> 

<iframe src="https://www.wikipedia.org/" height="700" width="550">Wikipedia Encyclopedia</iframe>

Nguồn

2012-02-14 12:24:44

+5

Tuyệt vời - nhưng ** không sử dụng ** 'zoom' ** và ** một trong các thuộc tính của nhà cung cấp cụ thể. Ví dụ: nếu bạn sử dụng Chrome, 'iframe' của bạn được phóng to và chuyển đổi - điều gì dẫn đến việc phóng to hai lần. – Gerwald

+0

Điều này không hoàn toàn trả lời câu hỏi, phải không? OP rõ ràng muốn chia tỷ lệ ** nội dung ** của iframe, ** chứ không phải ** iframe. – rustyx

3

Không chắc điều này làm việc với các tài liệu liên quan, nhưng với địa phương tổ chức nội dung các công việc sau:

<IFRAME id="frame" src="local.pdf#zoom=100"></IFRAME>

Nguồn

2015-05-01 14:02:32

Các vấn đề liên quan

 Các vấn đề liên quan