jQuery 如何在没有 iFrame 的情况下在另一个页面内显示外部网站?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/39102215/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-26 17:12:32  来源:igfitidea点击:

How to Show External website inside another page without iFrame?

jqueryhtmlwebdojo

提问by Prabhu Arumugam

I need to open External website inside my application without iFrame also I need to pass some header values to that external website.

我需要在没有 iFrame 的情况下在我的应用程序中打开外部网站,我还需要将一些标头值传递给该外部网站。

Help me..

帮我..

回答by GibboK

Some alternative solutions to an iframe are:

iframe 的一些替代解决方案是:

AJAX- You can use the XMLHttpRequest object to retrieve data and inject it to your page, for example inside a div. Example using jQuery:

AJAX- 您可以使用 XMLHttpRequest 对象检索数据并将其注入您的页面,例如在div. 使用 jQuery 的示例:

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

HTML5 Web Components- HTML Imports, part of the Web Components, allows to bundle HTML documents in other HTML documents. That includes HTML, CSS, JavaScript or anything else an .html file can contain. Example:

HTML5 Web 组件- HTML 导入,作为 Web 组件的一部分,允许将 HTML 文档捆绑在其他 HTML 文档中。这包括 HTML、CSS、JavaScript 或 .html 文件可以包含的任何其他内容。例子:

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

Some other ideas are:

其他一些想法是:

<object>tag - It defines an embedded object within an HTML document. Can be used fot HTML file and multimedia content like audio, video, applets, ActiveX, PDF and Flash or other plugins).

<object>标签 - 它定义了 HTML 文档中的嵌入对象。可用于 HTML 文件和多媒体内容,如音频、视频、小程序、ActiveX、PDF 和 Flash 或其他插件)。

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

<embed>tag - It defines a container for an external application for example a plug-in, in can be also "hacked" and used to display an HTML page.

<embed>标签 - 它为外部应用程序定义了一个容器,例如插件,也可以被“入侵”并用于显示 HTML 页面。

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

Regarding passing HEADER the best solution would be using an AJAX approach, here an example:

关于传递 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); }
});

回答by fernando

you can try this:

你可以试试这个:

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