2011-07-07 42 views
8

Tôi phải bao gồm một trang web bên trong div của trang web của tôi. Tôi muốn somehting như iframe được thực hiện với DIV. Về cơ bản, tôi sẽ cung cấp một URL cho div của tôi và nó phải mở nó bên trong chính nó ... Chúng ta có một cái gì đó như thế này trong HTML hiện đại? Tôi không thể sử dụng khung vì một số trình duyệt có vấn đề với khung.Bao gồm một trang web bên trong một div

+0

Tôi nghi ngờ rằng bạn sẽ có ít vấn đề sử dụng một 'iframe' hơn bạn sẽ được tái tạo' năng iframe' với một 'div'. Bạn đang nhắm mục tiêu các trình duyệt nào có vấn đề khi sử dụng 'iframes' (hoặc' frame's)? –

+0

Không thể tìm thấy bất cứ điều gì để bỏ phiếu này chỉ là một câu hỏi đơn giản bởi vì các trình duyệt như chrome không cho phép liên lạc interframe – Varun

+0

Chrome cho phép liên lạc interframe. Nó không cho phép liên lạc giữa các miền mà không có CORS, nhưng đó là theo spec. – Quentin

Trả lời

3

Không. Bạn không thể nhúng một tài liệu HTML hoàn chỉnh bên trong một phần tử div khác vì đây là một phần tử mức khối và W3C đã xác định những gì có thể được bao gồm bên trong nó.

Nhưng có một giải pháp thay thế. Thực hiện theo các bước sau:

  1. Lấy tài liệu sử dụng ajax (đá jQuery, sử dụng đó)
  2. Trích xuất nội dung của phần tử <body> và đặt nó bên trong phần tử div bạn
  3. Nhận tất cả các liên kết và kịch bản của <head> yếu tố và thêm chúng vào phần tử <head> của tảo hiện có của bạn.
+0

gợi ý tốt đẹp – Varun

+2

Bạn sẽ gặp phải lỗi tập lệnh chéo trang – kleinohad

+1

Tôi nhận thấy đây là một năm cũ, nhưng tôi có cùng yêu cầu. Nếu bạn sử dụng ý tưởng này, bạn sẽ gặp rắc rối với các thuộc tính 'id'? (Bạn có thể có cùng một id trên 2 trang bạn đang 'kết hợp') ID trùng lặp có thể làm hỏng trình duyệt và bất kỳ mã truy vấn 'js' nào ... – Jess

1

bạn nên sử dụng khung nội tuyến. đó là cơ bản những gì iframes được cho. nếu bạn gắn bó với các trình duyệt hiện đại trong mọi trường hợp, chúng không có vấn đề với iframe (không nhiều hơn bạn sẽ phải đối mặt bằng cách sử dụng div thay thế) ...

0

Nó phải có trong câu hỏi riêng của mình, nhưng OP đã làm rõ lý do ông không muốn sử dụng một iframe là bởi vì giao tiếp interframe không được phép. Vâng, không có gì là proxy + postMessage không thể giải quyết được.

Tôi tin rằng không có cách nào thực sự nhúng một tài liệu đầy đủ vào một tài liệu khác, giữ lại những thứ như tách phong cách và tập lệnh và tương tự, mà không sử dụng khung theo một nghĩa nào đó.

0

Đây thực sự là phần mở rộng cho phản hồi của Saeed. Để khắc phục các vấn đề về tập lệnh chéo trang, bạn sẽ phải viết một tập lệnh trên máy chủ của riêng bạn thực hiện cuộc gọi CURL để nhúng trang web. Sau đó, javascript của bạn sẽ thực hiện cuộc gọi đến tập lệnh này, chuyển URL dưới dạng tham số GET/POST.

Tôi đồng ý với rất nhiều người khác ở đây rằng đây là trường hợp bạn thực sự chỉ nên sử dụng iframe ... Tôi tin rằng bạn có thể đặt iframe không có thẻ src và đặt nội dung theo cách thủ công bên trong. Điều đó có nghĩa là bạn không cần phải thực hiện các bước mà Saeed đề xuất để phá vỡ đầu và cơ thể. Tuy nhiên, bạn vẫn cần kịch bản mà tôi mô tả để có được xung quanh kịch bản trang web chéo.

16

Hãy thử sử dụng một yếu tố <object>:

<div style="margin: 0 auto; width:100%; height:400px;"> 
    <object type="text/html" data="**URL to page**" 
      style="width:100%; height:100%; margin:1%;"> 
    </object> 
</div> 
+0

Trình duyệt/phiên bản nào tương thích với? – checksum

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