HTML5 định nghĩa một số yếu tố nội dung được nhúng, theo quan điểm của một con chim, dường như rất giống với điểm giống hệt nhau.

Sự khác biệt thực tế giữa iframe, embedvà là objectgì?

Nếu tôi muốn nhúng tệp HTML từ trang web của bên thứ ba, tôi có thể sử dụng yếu tố nào trong số những yếu tố này và chúng khác nhau như thế nào?

<iframe>

Phần tử iframe biểu thị bối cảnh duyệt web lồng nhau. Tiêu chuẩn HTML 5 - "Phần <iframe>tử"

Chủ yếu được sử dụng để bao gồm các tài nguyên từ các tên miền hoặc tên miền phụ khác nhưng cũng có thể được sử dụng để bao gồm nội dung từ cùng một tên miền. Điểm <iframe>mạnh của mã là mã nhúng là 'sống' và có thể giao tiếp với tài liệu gốc.

<embed>

Được chuẩn hóa trong HTML 5, trước đó nó là một thẻ không chuẩn, được thừa nhận đã được triển khai bởi tất cả các trình duyệt chính. Hành vi trước HTML 5 có thể thay đổi ...

Phần tử nhúng cung cấp một điểm tích hợp cho một ứng dụng bên ngoài (thường không phải là HTML) hoặc nội dung tương tác. ( Tiêu chuẩn HTML 5 - "Phần <embed>tử" )

Được sử dụng để nhúng nội dung cho các plugin trình duyệt. Ngoại lệ cho điều này là SVG và HTML được xử lý khác nhau theo tiêu chuẩn.

Các chi tiết về những gì có thể và không thể được thực hiện với nội dung được nhúng tùy thuộc vào plugin trình duyệt được đề cập. Nhưng đối với SVG, bạn có thể truy cập tài liệu SVG được nhúng từ cha mẹ với nội dung như:

svg = document.getElementById("parent_id").getSVGDocument();

Từ bên trong một tài liệu SVG hoặc HTML được nhúng, bạn có thể tiếp cận cha mẹ với:

parent = window.parent.document;

Đối với HTML nhúng, không có cách nào để lấy tài liệu được nhúng từ cha mẹ (mà tôi đã tìm thấy).

<object>

Phần <object>tử có thể biểu thị một tài nguyên bên ngoài, tùy thuộc vào loại tài nguyên đó, sẽ được coi là một hình ảnh, như một bối cảnh duyệt web lồng nhau hoặc như một tài nguyên bên ngoài được xử lý bởi một plugin. ( Tiêu chuẩn HTML 5 - "Phần <object>tử" )

Phần kết luận

Trừ khi bạn đang nhúng SVG hoặc một cái gì đó tĩnh, bạn có thể sử dụng tốt nhất <iframe>. Để bao gồm sử dụng SVG <embed>(nếu tôi nhớ chính xác, <object>bạn sẽ không cho phép tập lệnh). Thành thật tôi không biết tại sao bạn sẽ sử dụng <object>trừ khi các trình duyệt cũ hơn hoặc flash (mà tôi không làm việc với).

Như đã chỉ ra trong các ý kiến ​​dưới đây; các tập lệnh <object>sẽ chạy nhưng bối cảnh cha mẹ và con không thể giao tiếp trực tiếp. Với <embed>bạn có thể có được bối cảnh của đứa trẻ từ cha mẹ và ngược lại. Điều này có nghĩa là họ có thể sử dụng các tập lệnh trong cha mẹ để thao túng con, v.v. Phần đó không thể thực hiện được <object>hoặc <iframe>ở đó bạn sẽ phải thiết lập một số cơ chế khác thay vào đó, chẳng hạn như API postMessage JavaScript .

Một lý do để sử dụng objecttrên iframelà đối tượng tái kích thước nội dung nhúng để phù hợp với kích thước đối tượng. đáng chú ý nhất trên safari trong iPhone 4s có chiều rộng màn hình 320pxvà html từ URL nhúng có thể đặt kích thước lớn hơn.

Một lý do khác để sử dụng objecttrên iframe là objectcác tài nguyên phụ (khi <object>thực hiện HTTPcác yêu cầu) được coi là passive/displayvề mặt Mixed content, điều đó có nghĩa là nó an toàn hơn khi bạn phải có Mixed content.

Nội dung hỗn hợp có nghĩa là khi bạn có httpsnhưng tài nguyên của bạn đến từhttp .

Tham khảo: https://developer.mozilla.org/en-US/docs/Web/Security/Mixed_content