Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to Show External website inside another page without iFrame? [closed]

Tags:

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

Help me..

like image 968
Prabhu Arumugam Avatar asked Aug 23 '16 13:08

Prabhu Arumugam


People also ask

How do I show an external website inside another page without an iframe?

We can use the object tag in HTML to embed external resources in the webpage. We can use the tag to display another webpage in our webpage. The object tag is an alternative to the iframe tag in HTML. We can use the tag to embed different multimedia components like image, video, audio, etc.

How do I view an external website on a different page?

An iframe or inline frame is used to display external objects including other web pages within a web page. An iframe pretty much acts like a mini web browser within a web browser. Also, the content inside an iframe exists entirely independent from the surrounding elements.

How do I embed content without an iframe?

One of the simplest methods to embed a YouTube video in a web page without IFrame is by embedding the video using the HTML <object> tag. Simply provide the URL of the video to the <object> element's data property and set few other properties like, the width, height, and you are ready to go.

How do I show a website on another website HTML?

The easiest way to embed HTML5 project into your web page is using an iframe (inline frame). Iframe is just a very simple HTML code that used to display content from another source into a web page. If you know copy and paste, you can do it. The src attribute specifies the URL (web address) of the inline frame page.


1 Answers

Some alternative solutions to an iframe are:

AJAX - You can use the XMLHttpRequest object to retrieve data and inject it to your page, for example inside a div. Example using 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:

   <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 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 src="http://stackoverflow.com" width=200 height=200 /> 

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

$.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); } }); 
like image 199
GibboK Avatar answered Oct 03 '22 14:10

GibboK