回答:
基本的に、HTMLをWebページに埋め込むには4つの方法があります。
<iframe>iframeのコンテンツは、ページとは完全に別のコンテキストにあります。これは主に優れた機能であり、ブラウザーのバージョン間で最も互換性がありますが、追加の課題が生じます（フレームのサイズをコンテンツに合わせて縮小するのは難しく、めちゃくちゃスクリプトに出入りするのに非常に不満があり、スタイル設定はほぼ不可能です）。XMLHttpRequestオブジェクトを使用してデータを取得し、それをページに挿入できます。それはスクリプト技術に依存しているため、実行が遅く、複雑になるなどの欠点があるため、理想的ではありません。HTML5 Webコンポーネント。Webコンポーネントの一部であるHTMLインポートを使用すると、HTMLドキュメントを他のHTMLドキュメントにバンドルできます。それは、HTML、CSS、JavaScriptまたは何か他の.htmlファイルを含めることができます。これは、多くの興味深いユースケースを備えた優れたソリューションになります。ビルディングブロックとして配布できるバンドルされたコンポーネントにアプリを分割し、冗長性やコード編成などを回避するために依存関係をより適切に管理します。ここに簡単な例を示します。
<!-- Resources on other origins must be CORS-enabled. -->
<link rel="import" href="http://example.com/elements.html">
ネイティブの互換性は依然として問題ですが、ポリフィルを使用してエバーグリーンブラウザで機能させることができます。
次のようにオブジェクトと埋め込みを使用できます。
<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>これは新しいことではありませんが、まだ機能します。同じ機能を持っているかどうかはわかりません。
いいえ、同等のものはありません。この<iframe>要素はHTML5でも引き続き有効です。必要な正確な対話に応じて、異なるAPIが存在する場合があります。たとえばpostMessage、クロスドメインのJavaScriptインタラクションを実現できるメソッドがあります。ただし、クロスドメインのHTMLコンテンツ（CSSでスタイル設定し、JavaScriptでインタラクティブにする）を表示する場合は、この方法を使用することをお勧めしますiframe。
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 onerror="alert('URL invalid !!');" />これを行い、ベースページまたはコンテンツが提供されているサーバーを制御する場合は、クロスオリジンリソースシェアリング（http://www.w3.org/TR/access-control/）を使用して、クライアントにサイドJavaScriptを使用してデータを<div>via にロードします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');
?>これも機能しているように見えますが、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
iframeは、クロスドメインのビジュアルコンテンツをダウンロードするための最良の方法です。AJAXを使用すると、WebページからHTMLをダウンロードしてdivに貼り付けることができます（他の人が述べたように）が、より大きな問題はセキュリティです。iframeを使用すると、クロスドメインのコンテンツを読み込むことはできますが、コンテンツは実際には自分のものではないため、操作することはできません。一方、AJAXを使用すると、ダウンロード可能なコンテンツを確実に操作できますが、他のドメインのサーバーは、最初からダウンロードできるように設定する必要があります。多くの場合、他のドメインの構成にアクセスできず、アクセスしたとしても、そのような構成を常に行わないと、頭痛の種になる可能性があります。その場合、iframeははるかに簡単な代替手段となります。
他の人が言及したように、embedタグとobjectタグを使用することもできますが、これは必ずしもiframeよりも進んでいる、または新しいとは限りません。
HTML5は、クロスドメインから情報を取得するためにWeb APIを採用する方向に向かっています。通常、Web APIはHTMLではなくデータを返すだけです。
nice-to-know
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メソッドを要求しているので、これで十分です。
この問題を解決するためにノードモジュールを作成しましたnode -iframe-replacement。親サイトのソースURLとCSSセレクターを提供してコンテンツを挿入し、2つをマージします。
親サイトへの変更は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
});
});JSON-Pを確認する必要があります。これは、問題が発生したときの完璧な解決策でした。
https://en.wikipedia.org/wiki/JSONP
基本的に、すべてのデータを読み込むJavaScriptファイルと、それを処理して表示する別のJavaScriptファイルを定義します。これにより、iframeの醜いスクロールバーが取り除かれます。