Tôi có một trang web có 2 iFrames trong đó. Cả hai đều có chiều rộng cố định và chiều cao. Tôi đang tải các trang web bên ngoài bên trong chúng. Làm thế nào tôi có thể thay đổi kích thước chiều rộng của các trang web bên ngoài để phù hợp với iFrame (như trình duyệt di động bằng cách thay đổi chế độ xem)?Thay đổi kích thước nội dung trang web bên ngoài để phù hợp với chiều rộng iFrame
Điều bạn có thể làm là đặt chiều rộng và chiều cao cụ thể cho khung nội tuyến của mình (ví dụ: các khung này có thể bằng kích thước cửa sổ của bạn) và sau đó áp dụng chuyển đổi tỷ lệ cho nó. Giá trị tỷ lệ sẽ là tỷ lệ giữa chiều rộng cửa sổ và thứ nguyên bạn muốn đặt thành iframe.
Ví dụ:
<iframe width="1024" height="768" src="http://www.bbc.com" style="-webkit-transform:scale(0.5);-moz-transform-scale(0.5);"></iframe>
+1, thực sự tốt nhưng có thể không phải là giải pháp trình duyệt chéo! –
đúng, nhưng nó phụ thuộc vào định nghĩa của bạn về giải pháp trình duyệt chéo. AFAIK nó sẽ hoạt động trong IE> 8 – Luca
Nó làm việc cho tôi một cách hoàn hảo. Cảm ơn .... :) –
Bên trong khung nội tuyến, trình duyệt tự động hiển thị trang web giống như trang trong trang riêng, nó hoạt động theo cách tương tự như ví dụ bạn đã đổi kích thước trình duyệt ... trang web sẽ được hiển thị khi được thiết kế cho dù đó là một thiết kế chất lỏng trên kích thước cố định hoặc bất cứ điều gì ... bạn không thể buộc một hành vi hiển thị khác nhau trên trang web. Tuy nhiên, bạn có thể sửa đổi đánh dấu trang của chương trình.
Mẹo cho 1 trang web thay đổi kích thước chiều cao. Nhưng bạn có thể thay đổi thành 2 trang web.
Đây là mã của tôi để đổi kích thước khung nội tuyến với trang web bên ngoài. Bạn cần chèn mã vào trang mẹ (với mã iframe) và trong trang web bên ngoài, vì vậy, điều này sẽ không hoạt động với bạn không có quyền truy cập để chỉnh sửa trang web bên ngoài.
địa phương:
<IFRAME STYLE="width:100%;height:1px" SRC="http://www.remote-site.com/" FRAMEBORDER="no" BORDER="0" SCROLLING="no" ID="estframe"></IFRAME>
<SCRIPT>
var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
var eventer = window[eventMethod];
var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message";
eventer(messageEvent,function(e) {
if (e.data.substring(0,3)=='frm') document.getElementById('estframe').style.height = e.data.substring(3) + 'px';
},false);
</SCRIPT>
Bạn cần điều này "frm" tiền tố để tránh các vấn đề với mã embeded khác như Twitter hay Facebook plugin. Nếu bạn có một trang đơn giản, bạn có thể loại bỏ tiền tố "if" và "frm" trên cả hai trang (script và onload).
Điều khiển từ xa:
Bạn cần jQuery để hoàn thành chiều cao trang "thực". Tôi không thể nhận ra làm thế nào để làm với JavaScript tinh khiết vì bạn sẽ có vấn đề khi thay đổi kích thước chiều cao xuống (cao hơn xuống thấp hơn) bằng cách sử dụng body.scrollHeight hoặc liên quan. Đối với một số lý do, nó sẽ trở lại luôn luôn là chiều cao lớn nhất (pre-redimensioned).
<BODY onload="parent.postMessage('frm'+$('#master').height(),'*')" STYLE="margin:0">
<SCRIPT SRC="path-to-jquery/jquery.min.js"></SCRIPT>
<DIV ID="master">
your content
</DIV>
Vì vậy, trang gốc (khung nội tuyến) có chiều cao mặc định là 1px. Tập lệnh chèn "chờ tin nhắn/sự kiện" từ khung nội tuyến. Khi nhận được tin nhắn (tin nhắn) và 3 ký tự đầu tiên là "frm" (để tránh vấn đề được đề cập), sẽ lấy số từ vị trí thứ 4 và đặt chiều cao iframe (kiểu), bao gồm đơn vị 'px'.
Trang web bên ngoài (được tải trong iframe) sẽ "gửi thư" tới cha mẹ (công cụ mở) với "frm" và chiều cao của div chính (trong trường hợp này là id "master"). Các "*" trong postmessage có nghĩa là "bất kỳ nguồn".
Hy vọng điều này sẽ hữu ích. Xin lỗi vì tiếng Anh của tôi.
Điều đó là không thể IMHO [Xem này] (http://stackoverflow.com/questions/3298210/how-to-embed-a-resized-website-throught-an-iframe). –
Cảm ơn bạn đã trả lời. –
Bạn được chào đón :-) –