web-dev-qa-db-ja.com

iFrameなしで別のページ内に外部Webサイトを表示する方法

IFrameを使用せずにアプリケーション内で外部Webサイトを開く必要があります。また、その外部Webサイトにヘッダー値を渡す必要もあります。

助けて..

jqueryhtmlwebdojo
11
Prabhu Arumugam

Iframeの代替ソリューションは次のとおりです。

[〜＃〜] ajax [〜＃〜]-XMLHttpRequestオブジェクトを使用して、データを取得し、たとえばdiv内などにページに挿入できます。 jQueryを使用した例：

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

HTML5 Webコンポーネント-Webコンポーネントの一部であるHTMLインポートにより、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); }
});
21
GibboK

これを試すことができます：

<div> 
    <object type="text/html" data="http://validator.w3.org/" width="800px" height="600px" style="overflow:auto;border:5px ridge blue">
    </object>
 </div>
3
fernando