在HTML5中有什麽可以替代iFrame

我想知道在HTML5中是否有可替代iFrames功能。我的意思是，能夠在不使用iFrame的情況下在網頁內部注入跨域HTML。

最佳解決方法

通常有4種方法可以將HTML嵌入到網頁中：

<iframe> iframe的內容完全位於當前頁麵不同的上下文中。雖然這是一個很棒的功能，而且是不同瀏覽器版本之間兼容最好的，但是它也帶來了額外的問題(將frame大小跟網頁內容設置一致比較麻煩)。
AJAX。可以使用XMLHttpRequest對象來檢索數據並將其注入到頁麵中。這不是最理想的方法，因為它依賴於腳本技術，從而可能使執行速度變慢，同時，過程也比較複雜，其他缺點。
Hacks。很少這樣做，不是很可靠。
HTML5 Web組件。作為Web組件的一部分，HTML Imports允許將HTML文檔綁定到其他的HTML文檔中。這包括HTML，CSS，JavaScript或任何其他.html文件可以包含的內容。這使得它成為一個很好的解決方案，有許多有趣的用例：將應用程序拆分成捆綁的組件，將其作為構建塊進行分發；更好地管理依賴關係以避免冗餘，代碼組織等。下麵是一個簡單的例子：
```

<link rel="import" href="http://example.com/elements.html">
```

原生兼容性(Native compatibility)仍然是一個問題，但可以使用polyfill使其在evergreen browsers中能工作。

更多資料見www.html5rocks.com和webcomponents.org。

次佳解決方法

Html5中沒有完全等同的東西。 <iframe>元素在HTML5中仍然有效。根據您需要的確切交互，可能會有不同的API。例如有postMessage方法，它允許您實現跨域JavaScript交互。但是，如果你想顯示跨域的HTML內容(使用CSS樣式，並與javascript交互)，iframe是一個很好的方法。

第三種解決方法

可以使用對象並嵌入，如下所示：

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

這並不是新功能，但仍然有效。我不確定Html5是否具有相同的功能。

第四種方法

如果一定要用iframe功能並控製從中提供基本頁麵或內容的服務器，則可以使用跨源資源共享(http://www.w3.org/TR/access-control/)允許client-side JavaScript通過XMLHttpRequest()將數據加載到<div>中：

// 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();

現在，為了完成整個操作的關鍵步驟，您需要為您的服務器編寫代碼，以便為客戶端提供Access-Control-Allow-Origin頭文件，指定您希望客戶端代碼能夠通過XMLHttpRequest()訪問哪些域。以下是可以包含在頁麵頂部的PHP代碼示例，以便將這些標題發送給客戶端：

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

第五種方法

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

也可以試試embed：



<embed src="https://blogs.claritycon.com/blog/2016/03/bower-packages-asp-net-core-1-0/" width=200 height=200 />

其他補充

iframe仍然是下載跨域可視內容的最佳方式。有了AJAX，你肯定可以從網頁上下載HTML並粘貼到div中(正如其他人所說的那樣)，但更大的問題是安全性。使用iframe，能夠加載跨域內容，但無法操作它，因為內容實際上不屬於您。另一方麵，使用AJAX，您可以操縱任何您可以下載的內容，但是需要設置其他域的服務器，以便您可以下載。很多時候，你將無法訪問其他域的配置，這可能是一個頭痛的問題。在這種情況下，iframe用起來更容易。

正如其他人所提到的，你也可以使用嵌入標簽和對象標簽，但這不一定比iframe更先進或更新穎。

HTML5在采用Web API來從跨域獲取信息方麵走得更遠。通常web API隻是返回數據，而不是HTML。

html5 iframe

參考文獻

Alternative to iFrames with HTML5