Thay thế cho iFrames bằng HTML5

Question

Tôi muốn biết liệu có thay thế cho iFrames bằng HTML5 hay không. Ý tôi là, có thể tiêm HTML tên miền chéo bên trong trang web mà không cần sử dụng iFrame.

Answer 1

Không, không có giá trị tương đương. Phần tử <iframe> vẫn hợp lệ trong HTML5. Tùy thuộc vào sự 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ó phương thức postMessage cho phép bạn đạt được tương tác javascript giữa nhiều miền. Nhưng nếu bạn muốn hiển thị nội dung HTML miền chéo (được tạo kiểu bằng CSS và tương tác với javascript) iframe vẫn là một cách hay để làm.

Answer 2

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> 

Mà không phải là 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ù.

Answer 3

Bạn có thể sử dụng XMLHttpRequest để tải trang vào div (hoặc bất kỳ phần tử nào khác trên trang của bạn). Một chức năng dụ 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 sever bạn có khả năng, bạn cũng có thể sử dụng PHP để làm điều này, nhưng kể từ khi bạn đang yêu cầu cho một phương pháp HTML5, điều này sẽ được tất cả các bạn cần.

Answer 4

Nếu bạn muốn làm điều này và kiểm soát máy chủ mà từ đó các trang cơ sở hay những nội dung đang được phục vụ, bạn có thể sử dụng Cross xứ Resource Sharing (http://www.w3.org/TR/access-control/) để cho phép client-side JavaScript để tải dữ liệu vào một <div> 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ờ cho các lynchpin của toàn bộ hoạt động này, bạn cần phải viết mã cho máy chủ của bạn sẽ cung cấp cho khách hàng các Access-Control-Allow-Origin tiêu đề, nêu rõ tên miền nào bạn muốn mã client-side để có thể truy cập thông qua XMLHttpRequest(). Sau đây là một ví dụ về mã PHP bạn có thể đưa ở phía trên cùng của trang của bạn để gửi các tiêu đề cho các khách hàng:

<?php 
    header('Access-Control-Allow-Origin: http://api.google.com'); 
    header('Access-Control-Allow-Origin: http://some.example.com'); 
?> 

Answer 5

này cũng dường như để làm việc, mặc dù W3C xác định nó không có ý định "cho một bên ngoài (thường là không phải HTML) ứng dụng 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

Answer 6

Một iframe vẫn là cách tốt nhất để tải chéo làm nội dung hình ảnh chính. 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 một 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 nội dung đó vì nội dung thực sự không 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 miền khác cần được thiết lập theo cách như vậy sẽ cho phép bạn tải xuống nội dung đó để 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 miền khác và ngay cả khi bạn làm, trừ khi bạn thực hiện loại cấu hình đó mọi lúc, nó có thể là một nhức đầu. Trong trường hợp đó iframe có thể là MUCH 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 không nhất thiết phải nâng cao hơn hoặc mới hơn khung nội tuyến.

HTML5 đã đi theo hướng áp dụng API web để nhận thông tin từ các tên miền chéo. Thông thường, các API web chỉ trả về dữ liệu và không phải HTML.

Answer 7

Về cơ bản có 4 cách để nhúng HTML vào một trang web: Nội dung

• An iframe sống hoàn toàn trong một bối cảnh riêng biệt hơn trang của bạn. Mặc dù đó 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, nó tạo ra những thách thức bổ sung (thu nhỏ gói kích thước của khung thành nội dung của nó là khó khăn, phiền toái khi viết kịch bản vào/ra, gần như không thể tạo kiểu).
• AJAX. Như các giải pháp cho thấy ở đây chứng minh, bạn có thể sử dụng đối tượng XMLHttpRequest để truy xuất dữ liệu và đưa nó vào trang của bạn. Nó không phải là lý tưởng bởi vì nó phụ thuộc vào kỹ thuật kịch bản, do đó làm cho việc thực hiện chậm hơn và phức tạp hơn, trong số các drawbacks khác.
• Hacks. Ít được đề cập trong câu hỏi này và không đáng tin cậy lắm.

• 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 tài liệu HTML trong các tài liệu HTML khác. Điều đó bao gồm HTML, CSS, JavaScript hoặc bất kỳ tệp nào khác có thể chứa tệp .html. Điều này làm cho nó một giải pháp tuyệt vời với nhiều trường hợp sử dụng thú vị: chia nhỏ một ứng dụng thành các thành phần kèm mà bạn có thể phân phối như các khối xây dựng, quản lý tốt hơn phụ thuộc để tránh dư thừa, tổ chức mã, vv Đây là một ví dụ nhỏ:

  <!-- Resources on other origins must be CORS-enabled. --> 
  <link rel="import" href="http://example.com/elements.html"> 
  

Native compatibility vẫn là một vấn đề, nhưng bạn có thể sử dụng polyfill để làm cho nó hoạt động trong evergreen browsers Hôm nay.

Bạn có thể tìm hiểu thêm here và here.

Answer 8

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 />

Answer 9

Mặc dù không có bất kỳ sự thay thế hoàn hảo Tôi đã được làm việc trên một cái gì đó, nó được xây dựng be-được dễ dàng và tôi hạnh phúc để nói nó hoạt động (nhờ junkfoodjunkie)

Về cơ bản, hệ thống hiện tại của tôi sử dụng một số php cơ bản/máy chủ kết hợp để tải và sau đó lưu các tập tin vào máy chủ, tôi chỉ mới bắt đầu dự án ngày hôm nay để chỉ tập tin chính (chẳng hạn như index.html) được nạp. Tôi sẽ làm việc để làm cho nó tải 50 liên kết ish từ trang để trợ giúp với sự hỗ trợ. Nếu bạn muốn thử nghiệm nó: , nó được lưu trữ here. Để sử dụng nó thật dễ dàng, chỉ cần tải URL http://integratedmedia.ml/get/?link= và thêm trang của bạn vào cuối. không cần phải thêm vào https hoặc www.Nó cũng sẽ gây ra vấn đề nếu bạn làm :) Dù sao nếu bạn làm theo đó thiết lập trang sao chép của bạn sẽ được tìm thấy tại integratedmedia.ml/get/gettmp/YOURURL.html. Dưới đây là một ví dụ:

integratedmedia.ml/get/?link=google.com

tập tin tải về hiện tại là

integratedmedia.ml/get/gettmp/ google.com.html

Answer 10

Tôi đã tạo mô-đun nút để giải quyết vấn đề này node-iframe-replacement. Bạn cung cấp URL nguồn của trang mẹ và bộ chọn CSS để chèn nội dung của bạn vào và nó kết hợp cả hai.

Các thay đổi đối với trang web gốc được chọn sau mỗi 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 chứa một working example của tiêm nội dung vào trang BBC News nhà.

Answer 11

<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>

Answer 12

bạn có thể sử dụng thẻ đối tượng này cũng có vẻ làm việc