Lessons XXVIII : Tải nội dung một trang web khác vào một khung trên trang mình

[Ví dụ] AJAX Loader – Tải nội dung một trang web khác vào một khung trên trang mình!


Bạn xây dựng một trang web và bạn muốn trên đó 1 khung nội dung của bạn chứa 1 trang web khác (html, php, xml,…). Điều này có thể thực hiện dễ dàng với thẻ iframe, nhưng nếu bạn muốn dùng AJAX để tải trang đó (tức khi hiện lên thì nó đã load 100%) bạn có thể làm như sau:

Trước hết bạn tạo 1 file ajaxLoader.js có nội dung như sau:

PHP Code:

function ajaxLoader(url,id) {
if (document.getElementById) {
var x = (window.ActiveXObject) ? new ActiveXObject(“Microsoft.XMLHTTP”) : new XMLHttpRequest();
}
if (x) {
x.onreadystatechange = function() {
if (x.readyState == 4 && x.status == 200) {
el = document.getElementById(id);
el.innerHTML = x.responseText;
}
}
x.open(“GET”, url, true);
x.send(null);
}
}

Bạn save cùng thư mục trang web bạn đang tạo. Mở trang web bạn đang tạo lên,
Chèn đoạn code sau vào giữa <head> và </head>

PHP Code:

<script language=”javascript” src=”ajaxLoader.js”>
</script>
<style type=”text/css”>
#contentLYR {
position:absolute;
width:100%; // tùy chọn
height:100%; // tùy chọn
z-index:1; // tùy chọn
left: 0px; // tùy chọn
top: 200px; // tùy chọn
}
</style>

Tại thẻ <body> bạn khai báo như sau:

Code:

<body onload=”ajaxLoader(‘test.htm’,’contentLYR’)”>

(Chú ý test.html là trang được load.)

Trong thẻ <body> bạn chèn:

Code:

<div id=”contentLYR”>

Loading…

</div>

Hãy thử và cảm nhận.

Ngocha85(UDS)

  1. Leave a comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: