[解決済み] iFrameを使わずに外部のウェブサイトを別のページ内に表示するには？[クローズド］

質問

iFrameを使わずに、アプリケーションの中で外部のウェブサイトを開く必要があります。 また、私はその外部ウェブサイトにいくつかのヘッダー値を渡す必要があります。

助けてください。

解決方法を教えてください。

iframeの代替案としては、以下のようなものがあります。

AJAX - XMLHttpRequest オブジェクトを使用して、データを取得し、ページに注入することができます。 div . jQueryを使用した例です。

 $( "#result" ).load( "ajax/test.html" );

HTML5 Web コンポーネント - HTML Imports は Web Components の一部で、HTML ドキュメントを他の HTML ドキュメントにバンドルすることができます。これには、HTML、CSS、JavaScript、その他.htmlファイルに含まれ得るあらゆるものが含まれます。例を挙げます。

   <link rel="import" href="http://stackoverflow.com">

他のアイデアもあります。

<object> タグ - HTML文書内の埋め込みオブジェクトを定義するものです。HTMLファイルや、オーディオ、ビデオ、アプレット、ActiveX、PDF、Flashなどのマルチメディアコンテンツ、またはその他のプラグインに使用することができます）。

   <object data="http://stackoverflow.com" width="400" height="300" type="text/html">
        Alternative Content
    </object>

<embed> タグ - プラグインなどの外部アプリケーションのコンテナを定義し、HTMLページを表示するためにハックすることもできます。

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

HEADERの受け渡しについては、AJAXのアプローチを使用するのが最良の解決策でしょう。

$.ajax({
    url: "http://stackoverflow.com",
    data: { uname: "test" },
    type: "GET",
    beforeSend: function(xhr){xhr.setRequestHeader('X-TOKEN', 'xxxxx');},
    success: function() { alert('Success!' + authHeader); }
});

or in this way,

$.ajax({
    url: "http://stackoverflow.com",
    data: { uname: "test" },
    type: "GET",
    headers:{ "X-TOKEN": 'xxxxx'},
    success: function() { alert('Success!' + authHeader); }
});