2012-04-01 36 views
29

Nếu không sử dụng iframe, là nó có thể để tải các nội dung củaAjax/jQuery - Tải nội dung trang web vào div khi tải trang?

<div id="siteloader"></div> 

Với một trang web bên ngoài ví dụ somesitehere.com

Khi tải trang? - Tôi biết cách tải nội dung từ một tệp nhưng không chắc chắn cách tải toàn bộ trang web?

Rất cám ơn,

Trả lời

48

Điều này có thể làm mà không có một iframe đặc biệt. jQuery được sử dụng vì nó được đề cập trong tiêu đề.

<!doctype html> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    <title>Load remote content into object element</title> 
    </head> 
    <body> 
    <div id="siteloader"></div>​ 
    <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script> 
    <script> 
     $("#siteloader").html('<object data="http://tired.com/">'); 
    </script> 
    </body> 
</html> 
+5

Lưu ý rằng điều này sẽ không hoạt động nếu tiêu đề [Tùy chọn khung hình X] của trang từ xa (https://developer.mozilla.org/en-US/docs/Web/HTTP/X-Frame-Options) không cho phép nó. –

2

Bạn không thể tiêm nội dung từ một trang web (tên miền khác) bằng AJAX. Lý do iFrame phù hợp cho những thứ này là bạn có thể chỉ định nguồn đến từ một miền khác.

35

Hãy xem vào jQuery's .load() chức năng:

<script> 
    $(function(){ 
     $('#siteloader').load('http://www.somesitehere.com'); 
    }); 
</script> 

Tuy nhiên, điều này chỉ hoạt động trên cùng một tên miền của tập tin JS.

+5

.load jQuery này() phương pháp là tốt hơn so với .get jQuery() được đề xuất trong phản ứng khác, bởi vì nó cho phép bạn tải một mục cụ thể từ DOM url bên ngoài (ví dụ, chỉ là nội dung của một div và không phải là trang đầy đủ). Bằng cách đó bạn sẽ tránh được đánh dấu trùng lặp như hai "cơ thể" và như vậy: $ ('# result'). Load ('ajax/test.html #container'); – tomasofen

8

Với jQuery, có thể, tuy nhiên không sử dụng ajax.

function LoadPage(){ 
    $.get('http://a_site.com/a_page.html', function(data) { 
    $('#siteloader').html(data); 
    }); 
} 

Và sau đó đặt onload="LoadPage()" vào thẻ nội dung.

Mặc dù nếu bạn làm theo tuyến đường này, một phiên bản php có thể là tốt hơn:

echo htmlspecialchars(file_get_contents("some URL")); 
+24

Bạn không nghĩ rằng '$ .get' là Ajax? – xyz

+0

Không, điều này là không thể trong ajax, nhưng nó có thể trong jQuery một mình. một $ .get() có thể được gọi khi trang đã được nạp để đổ trang vào div được chỉ định – Njdart

+1

Ví dụ của bạn đang sử dụng Ajax trong jQuery. Tôi nghĩ rằng bạn đang cố gắng giải thích một cái gì đó khác với ví dụ của bạn. – xyz

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