替代iFrames與HTML5

Question

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

Answer 1

不，沒有相應的。 <iframe>元素在HTML5中仍然有效。根據您需要的確切交互方式，可能會有不同的API。例如，有postMessage方法可以讓你實現跨域javascript交互。但是，如果您想要顯示跨域HTML內容（使用CSS進行樣式設置並使用javascript進行交互），那麼iframe仍是一種很好的方法。

Answer 2

您可以使用對象和嵌入，像這樣：

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

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

Answer 3

您可以使用XMLHttpRequest將頁面加載到div（或頁面中的任何其他元素）。個例函數是：

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

如果你的服務器能，你也可以使用PHP來做到這一點，但既然你問了一個HTML5的方法，這應該是你所需要的。

Answer 4

如果你想做到這一點，控制從該基地頁面或內容正在服務的服務器，你可以使用跨源資源共享（​​）允許客戶端的JavaScript將數據加載到一個<div>通過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(); 

現在對於這整個操作的關鍵所在，你需要編寫代碼爲您的服務器，這將使客戶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'); 
?> 

Answer 5

這也似乎工作，儘管W3C指定它不打算「爲外部（通常非HTML）的應用程序或交互式內容」

<embed src="http://www.somesite.com" width=200 height=200 /> 

更多信息： http://www.w3.org/wiki/HTML/Elements/embed http://www.w3schools.com/tags/tag_embed.asp

Answer 6

iframe是依然下載交叉做的最好辦法主要的視覺內容。使用AJAX，您可以從網頁下載HTML並將其粘貼到div中（如其他人所述），但更大的問題是安全性。使用iframe，您可以加載跨域內容，但無法操作它，因爲內容實際上並不屬於您。另一方面，使用AJAX，您可以操縱您可以下載的任何內容，但是需要設置其他域的服務器，以便您可以先下載它。很多時候，您將無法訪問其他域的配置，即使您這樣做，除非您始終進行這種配置，否則可能會令人頭疼。在這種情況下，iframe可以是更簡單的選擇。

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

HTML5已經走向了採用Web API來從跨域獲取信息的方向。通常web API只是返回數據，而不是HTML。

Answer 7

基本上有4種方式嵌入到HTML網頁：

• 一個iframe的內容完全是生活在比你的頁面創建一個單獨的上下文。雖然這是一個很棒的功能，並且它是瀏覽器版本之間最兼容的，但它帶來了額外的挑戰（縮小了框架大小以適應其內容的難度，令人沮喪的腳本進出，幾乎不可能）。
• AJAX。正如這裏所示的解決方案所證明的，您可以使用XMLHttpRequest對象來檢索數據並將其注入到頁面中。這並不理想，因爲它依賴於腳本技術，從而使執行速度更慢，更復雜，其他drawbacks。
• 黑客。很少有人在這個問題中提到並且不太可靠。

• HTML5 Web Components。作爲Web組件的一部分的HTML Imports允許將HTML文檔捆綁到其他HTML文檔中。這包括HTML,CSS,JavaScript或其他任何.html文件可以包含的內容。這使得它有許多有趣的使用情況很好的解決方案：拆分成應用程序的組件捆綁在一起，你可以分發作爲構建塊，更好地管理依賴關係，因此不再重複代碼組織，等等。這裏是一個簡單的例子：

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

Native compatibility仍然是一個問題，但是您可以使用polyfill使其在evergreen browsers今天工作。

您可以瞭解更多here和here。

Answer 8

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

Answer 9

雖然目前還沒有任何完美的替代我一直在努力的東西，它的內置BE-容易，我很高興地說，它的工作原理（感謝junkfoodjunkie）

基本上，我目前的系統採用了一些基本的PHP /服務器組合來加載，然後將文件保存到服務器，我今天剛剛啓動了該項目，因此只加載了主文件（如index.html）。我將努力使它從頁面加載50個ish鏈接來幫助支持。如果你想測試它： 它託管here。使用它很簡單，只需加載網址http://integratedmedia.ml/get/?link=並將頁面添加到最後。無需在https或www中添加。如果你這樣做，它也會導致問題:)無論如何，如果你遵循該設置你的複製頁面將在integratedmedia.ml/get/gettmp/YOURURL.html找到。 下面是一個例子：

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

下載的文件現在是

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

Answer 10

我創建了一個節點模塊來解決這個問題node-iframe-replacement。您提供父站點和CSS選擇器的源URL以將您的內容注入並將它們合併在一起。

每5分鐘檢索一次父站點的更改。

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 
    }); 
}); 

源包含內容注入到BBC News主頁的working example。

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

可以使用對象標記這也似乎工作