Chủ đề tổng hợp

header ads

Tùy chỉnh mã nhúng website vào blog bằng thẻ Iframe

Mã Nhúng :

<center><div style="width: 1000px; height: 100%;" align="left" scrolling="no">
<div id="frameContainer" style="overflow:hidden;">
<iframe src="website-url" scrolling="no" style="width: 950px; height: 1000px; margin-top: -350px; margin-left: -3px; margin-right: -400px;" frameborder="0"></iframe></div></div></center>

Chỉnh sửa các giá trị in đậm cho phù họp.

1. width: 1000px; height: 100% là chiều rộng, chiều cao của vùng mà trang web sẽ được nhúng vào. Bạn phải đặt giá trị chiều rộng, chiều cao của vùng để nhúng bằng hoặc lớn hơn chiều rộng, chiều cao gốc của trang web được nhúng để nó hiển thị đầu đủ nội dung. Sau đó ta ẩn đi những nội dung mà ta muốn nó sẽ không hiển thị.

2. Ẩn các nội dung mà bạn muốn nó không hiển thị khi được nhúng:

a. width: 950px; height: 1000px là chiều rộng, chiều cao gốc của trang web được nhúng. Bạn phải đặt đúng giá trị chiều rộng, chiều cao gốc của trang được nhúng để nó hiển thị đầy đủ nội dung.

b. margin-top: -350px: Ẩn header của trang web được nhúng tính từ đầu trang trở xuống 350px.

c. margin-left: -3px: Ẩn bên trái trang web được nhúng 3px.

d. margin-right: -400px: Ẩn bên phải trang được nhúng 400px.

e. margin-bottom: -300px: Ẩn phía dưới trang được nhúng 300px.

f. website-url: Địa chỉ trang web được nhúng.

g. scrolling="no": Ẩn thanh trượt.

h. frameborder="0": Đường kẻ khung bằng 0px.

Mã nhúng tham khảo 1 :

<div style="border:2px solid #666; border-radius:11px; padding:20px;">
<iframe id="form-iframe" src="http://www.goghep.xyz" style="margin:0; width:100%; height:1000px; border:none; overflow:hidden;" scrolling="yes" onload="AdjustIframeHeightOnLoad()"></iframe>
<script type="text/javascript">
function AdjustIframeHeightOnLoad() { document.getElementById("form-iframe").style.height = document.getElementById("form-iframe").contentWindow.document.body.scrollHeight + "px"; }
function AdjustIframeHeight(i) { document.getElementById("form-iframe").style.height = parseInt(i) + "px"; }
</script>
</div>



Nguồn : Sưu tầm
Từ khóa : IFRAME HEIGHT AUTO RESIZE,  
Link tham khảo : 

http://www.willmaster.com/library/tutorials/auto-resize-iframe-when-content-size-changes.php
http://camera-giamsat.blogspot.com/2010/09/nhung-trang-web-vao-blogger-bang-iframe.html

Đăng nhận xét

0 Nhận xét