Câu trả lời:
Về cơ bản có 4 cách để nhúng HTML vào một trang web:
<iframe>Nội dung của iframe sống hoàn toàn trong một bối cảnh riêng biệt so với trang của bạn. Mặc dù đó hầu hết là một tính năng tuyệt vời và nó tương thích nhất trong số các phiên bản trình duyệt, nhưng nó tạo ra những thách thức bổ sung (thu nhỏ kích thước khung hình vào nội dung của nó là khó khăn, cực kỳ khó chịu với kịch bản vào / ra, gần như không thể tạo kiểu).XMLHttpRequestđối tượng để truy xuất dữ liệu và đưa dữ liệu vào trang của mình. Nó không lý tưởng bởi vì nó phụ thuộc vào các kỹ thuật kịch bản, do đó làm cho việc thực thi chậm hơn và phức tạp hơn, trong số các nhược điểm khác .Các thành phần web HTML5 . Nhập khẩu HTML, một phần của Thành phần Web, cho phép đóng gói các tài liệu HTML trong các tài liệu HTML khác. Điều đó bao gồm HTML, CSS, JavaScripthoặc bất cứ điều gì khác một .htmltệp có thể chứa. Điều này làm cho nó trở thành một giải pháp tuyệt vời với nhiều trường hợp sử dụng thú vị: chia một ứng dụng thành các thành phần được đóng gói mà bạn có thể phân phối dưới dạng khối xây dựng, quản lý tốt hơn các phụ thuộc để tránh dư thừa, tổ chức mã, v.v ... Dưới đây là một ví dụ nhỏ:
<!-- Resources on other origins must be CORS-enabled. -->
<link rel="import" href="http://example.com/elements.html">Khả năng tương thích tự nhiên vẫn còn là một vấn đề, nhưng bạn có thể sử dụng một polyfill để làm cho nó hoạt động trong các trình duyệt thường xanh Ngày nay.
Bạn có thể sử dụng đối tượng và nhúng, như vậy:
<object data="http://www.web-source.net" width="600" height="400">
<embed src="http://www.web-source.net" width="600" height="400"> </embed>
Error: Embedded data could not be displayed.
</object>Điều này không mới, nhưng vẫn hoạt động. Tôi không chắc chắn nếu nó có chức năng tương tự mặc dù.
Không, không có tương đương. Phần <iframe>tử vẫn còn hiệu lực trong HTML5. Tùy thuộc vào tương tác chính xác mà bạn cần, có thể có các API khác nhau. Ví dụ: có postMessagephương pháp cho phép bạn đạt được tương tác javascript tên miền chéo. Nhưng nếu bạn muốn hiển thị nội dung HTML tên miền chéo (được tạo kiểu bằng CSS và tương tác với javascript) thì iframevẫn là một cách tốt để làm.
object là một thay thế dễ dàng trong HTML5:
<object data="https://blogs.claritycon.com/blog/2016/03/bower-packages-asp-net-core-1-0/" width="400" height="300" type="text/html">
Alternative Content
</object>Bạn cũng có thể thử embed:
<embed src="https://blogs.claritycon.com/blog/2016/03/bower-packages-asp-net-core-1-0/" width=200 height=200 onerror="alert('URL invalid !!');" />Nếu bạn muốn làm điều này và kiểm soát máy chủ mà trang cơ sở hoặc nội dung đang được phục vụ, bạn có thể sử dụng Chia sẻ tài nguyên nguồn gốc chéo ( http://www.w3.org/TR/access-control/ ) để cho phép khách hàng- JavaScript bên để tải dữ liệu vào <div>thông qua XMLHttpRequest():
// I safely ignore IE 6 and 5 (!) users
// because I do not wish to proliferate
// broken software that will hurt other
// users of the internet, which is what
// you're doing when you write anything
// for old version of IE (5/6)
xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if(xhr.readyState == 4 && xhr.status == 200) {
document.getElementById('displayDiv').innerHTML = xhr.responseText;
}
};
xhr.open('GET', 'http://api.google.com/thing?request=data', true);
xhr.send();Bây giờ đối với lynchpin của toàn bộ hoạt động này, bạn cần viết mã cho máy chủ của mình để cung cấp cho khách hàng Access-Control-Allow-Origintiêu đề, chỉ định tên miền nào bạn muốn mã phía máy khách có thể truy cập qua XMLHttpRequest(). Sau đây là một ví dụ về mã PHP mà bạn có thể đưa vào đầu trang để gửi các tiêu đề này cho khách hàng:
<?php
header('Access-Control-Allow-Origin: http://api.google.com');
header('Access-Control-Allow-Origin: http://some.example.com');
?>Điều này cũng có vẻ hoạt động, mặc dù W3C chỉ định nó không dành cho "ứng dụng bên ngoài (thường không phải là HTML) hoặc nội dung tương tác"
<embed src="http://www.somesite.com" width=200 height=200 />Thông tin thêm: http://www.w3.org/wiki/HTML/Elements/embed http://www.w3schools.com/tags/tag_embed.asp
Một iframe vẫn là cách tốt nhất để tải xuống nội dung trực quan giữa các miền. Với AJAX, bạn chắc chắn có thể tải xuống HTML từ một trang web và dán nó vào div (như những người khác đã đề cập) tuy nhiên vấn đề lớn hơn là bảo mật. Với iframe, bạn sẽ có thể tải nội dung tên miền chéo nhưng sẽ không thể thao tác với nội dung đó vì nội dung không thực sự thuộc về bạn. Mặt khác với AJAX, bạn chắc chắn có thể thao tác bất kỳ nội dung nào bạn có thể tải xuống nhưng máy chủ của tên miền khác cần được thiết lập theo cách cho phép bạn tải xuống để bắt đầu. Rất nhiều lần bạn sẽ không có quyền truy cập vào cấu hình của tên miền khác và ngay cả khi bạn làm như vậy, trừ khi bạn thực hiện loại cấu hình đó mọi lúc, điều đó có thể gây đau đầu. Trong trường hợp đó, iframe có thể là lựa chọn thay thế dễ dàng hơn.
Như những người khác đã đề cập, bạn cũng có thể sử dụng thẻ nhúng và thẻ đối tượng nhưng điều đó không nhất thiết phải nâng cao hơn hoặc mới hơn so với iframe.
HTML5 đã đi nhiều hơn theo hướng áp dụng API web để lấy thông tin từ các tên miền chéo. Thông thường API web chỉ trả về dữ liệu mặc dù và không phải HTML.
nice-to-know
Bạn có thể sử dụng XMLHttpRequest để tải một trang vào div (hoặc bất kỳ yếu tố nào khác trên trang của bạn thực sự). Một chức năng mẫu sẽ là:
function loadPage(){
if (window.XMLHttpRequest){
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}else{
// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200){
document.getElementById("ID OF ELEMENT YOU WANT TO LOAD PAGE IN").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("POST","WEBPAGE YOU WANT TO LOAD",true);
xmlhttp.send();
}Nếu máy chủ của bạn có khả năng, bạn cũng có thể sử dụng PHP để làm điều này, nhưng vì bạn đang yêu cầu một phương thức HTML5, đây sẽ là tất cả những gì bạn cần.
Tôi đã tạo một mô-đun nút để giải quyết vấn đề thay thế nút-iframe này . Bạn cung cấp URL nguồn của trang mẹ và bộ chọn CSS để đưa nội dung của bạn vào và nó hợp nhất hai nội dung lại với nhau.
Thay đổi trang web mẹ được chọn cứ sau 5 phút.
var iframeReplacement = require('node-iframe-replacement');
// add iframe replacement to express as middleware (adds res.merge method)
app.use(iframeReplacement);
// create a regular express route
app.get('/', function(req, res){
// respond to this request with our fake-news content embedded within the BBC News home page
res.merge('fake-news', {
// external url to fetch
sourceUrl: 'http://www.bbc.co.uk/news',
// css selector to inject our content into
sourcePlaceholder: 'div[data-entityid="container-top-stories#1"]',
// pass a function here to intercept the source html prior to merging
transform: null
});
});Nguồn này chứa một ví dụ hoạt động về việc đưa nội dung vào trang chủ của BBC News .
Bạn nên xem JSON-P - đó là một giải pháp hoàn hảo cho tôi khi tôi gặp vấn đề đó:
https://en.wikipedia.org/wiki/JSONP
Về cơ bản, bạn xác định một tệp javascript tải tất cả dữ liệu của bạn và một tệp javascript khác xử lý và hiển thị nó. Điều đó được thoát khỏi thanh cuộn xấu xí của iframe.