web-dev-qa-db-ja.com

HTML5のiFrameに代わるもの

HTML5のiFrameに代わるものがあるかどうか知りたいのですが。つまり、iFrameを使用せずにWebページ内にクロスドメインHTMLを挿入できるということです。

html5iframe
161
stemlaur

基本的に、WebページにHTMLを埋め込むには4つの方法があります。

  • <iframe>iframeの内容は完全にあなたのページとは別の場所にあります。これは主に優れた機能であり、ブラウザのバージョン間で最も互換性がありますが、追加の問題が発生します（フレームのサイズをその内容に合わせて縮小するのは困難です）。
  • AJAX。ここに示されている解決策が証明するように、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">

ネイティブ互換性 はまだ問題ですが、 常緑樹ブラウザ で動作させるために polyfill を使うことができます。

here と here についてもっと学ぶことができます。

76
Oriol

次のように、objectとembedを使うことができます。

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

これは新しいものではありませんが、それでも機能します。それが同じ機能を持っているかどうかはわかりませんが。

50
nate

いいえ、同等のものはありません。 <iframe> 要素は、HTML 5でも有効です。どのような正確な対話が必要かに応じて、異なるAPIが存在する可能性があります。たとえば、クロスドメインのJavaScript相互作用を実現できる postMessage メソッドがあります。しかし、クロスドメインのHTMLコンテンツを表示したい場合（CSSでスタイルされ、JavaScriptでインタラクティブにされた）、iframeは良い方法として残ります。

48
Darin Dimitrov

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 !!');" />
30
Abrar Jahin

これを行い、ベースページまたはコンテンツが提供されているサーバーを制御したい場合は、Cross Origin Resource Sharing（ http://www.w3.org/TR/を使用できます。 access-control / ）XMLHttpRequest()を介してクライアントサイドJavaScriptが<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();

これで、このオペレーション全体の中心になるように、クライアント側のコードからXMLHttpRequest()経由でアクセスできるようにするドメインを指定して、クライアントにAccess-Control-Allow-Originヘッダーを提供するコードをサーバーに記述する必要があります。以下は、これらのヘッダをクライアントに送信するためにページの上部に含めることができるPHPコードの例です。

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

W3Cは「外部（通常はHTMLではない）アプリケーションや対話型コンテンツを意図したものではない」と規定していますが、これもうまくいくようです。

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

より詳しい情報： http://www.w3.org/wiki/HTML/Elements/embedhttp：/ /www.w3schools.com/tags/tag_embed.asp

11
Thomas Simoens

Iframeは、クロスドメインのビジュアルコンテンツをダウンロードするための最善の方法です。 AJAXを使えば、WebページからHTMLを確実にダウンロードしてdivに貼り付けることができます（他の人が言っているように）が、もっと大きな問題はセキュリティです。 iframeを使用すると、クロスドメインコンテンツを読み込むことはできますが、コンテンツは実際には自分に属していないため、操作することはできません。一方、AJAXを使用すると、ダウンロードできるすべてのコンテンツを確実に操作できますが、他のドメインのサーバーを最初からダウンロードできるようにセットアップする必要があります。他のドメインの設定にアクセスできない場合が多く、そのような設定を常に行わない限り、頭痛の種になる可能性があります。その場合、iframeがはるかに簡単な代替手段になります。

他の人が述べたように、埋め込みタグとオブジェクトタグを使用することもできますが、それはiframeよりも必ずしも高度で新しいというわけではありません。

HTML5は、クロスドメインから情報を取得するためにWeb APIを採用する方向に進んでいます。通常、Web APIはHTMLではなくデータを返すだけです。

5
Adam

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メソッドを求めているので、これはあなたが必要とする全てであるべきです。

4
CupOfTea696

この問題を解決するためにノードモジュールを作成しました 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
    });
});

ソースには、 BBCニュース のホームページにコンテンツを挿入する 実用例 が含まれています。

3
John Doherty

私が何かに取り組んできた完璧な代替品はありませんが、それは簡単であるように作られており、うまくいくと言えることを嬉しく思います（ junkfoodjunkie に感謝します）

基本的に、私の現在のシステムでは基本的なphp/serverコンボを使用してファイルをロードしてからサーバーに保存します。今日はプロジェクトを開始したのでメインファイル（index.htmlなど）のみがロードされます。私はそれがサポートを助けるためにページから50のようなリンクをロードするようにするつもりです。テストしたい場合は、ここでホストされています。使い方は簡単で、URL 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

0
ben nottelling