Embed an External Page Without an Iframe

how to embed external html file into current html file but without iframe tag

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); }
});

Embed an External Page Without an Iframe?

You could load the external page with jquery:

<script>$("#testLoad").load("http://www.somesite.com/somepage.html");</script>
<div id="testLoad"></div>
//would this help

Issues with how to Embed an External Page Without an Iframe

From my JavaScript console when I try to run that code in Firefox:

Load denied by X-Frame-Options: https://www.flickr.com/ does not permit cross-origin framing.

Flickr doesn't allow you to put its homepage in a frame (and a frame created by an object element is still a frame).

How to include external form without iframe?

You will not be able to display an external (Cross-Domain) form directly using any flavor of javascript. The only client-side solution is to use an iframe.

This is a restriction to prevent cross site scripting (XSS) attacks. There are modern alternatives like Microsoft's Cross-Domain Request (XDR), but this is a proposal and will not work in all browsers. Getting this to work client side will be a large undertaking.

There is one caveat: Server side languages do not have the same safeguards in place against XSS that modern browsers do. If you were to write a handler in a server side language that echoed the contents of an external form to your page, then you could indeed use jQuery, or JavaScript in general, to display this without using an iFrame.

---

Related Topics