Load HTML File Contents to Div [Without the Use of Iframes]

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

Angular bind html to div without using iframe

maybe this is what you need:
https://stackoverflow.com/a/56969578/5576972

which gives something like:

HTML:

<div [innerHTML]="myHtml"></div>

ts:

  myHtml:SafeHtml="";
  constructor(
      private sanitizer: DomSanitizer,
    private httpClient: HttpClient,
  ) {
  }

  async updateHtml(){
let newHtml = await this.httpClient.get(url, {responseType: "text"}).toPromise();

    this.myHtml =  this.sanitizer.bypassSecurityTrustHtml(newHtml);
  }

How to include an HTML page into another HTML page without frame/iframe?

If you're just trying to stick in your own HTML from another file, and you consider a Server Side Include to be "pure HTML" (because it kind of looks like an HTML comment and isn't using something "dirty" like PHP):

<!--#include virtual="/footer.html" -->

Load HTML content as text into div?

Use textContent instead to inject strings like this:

document.getElementById('content').textContent=txt

Jquery Mobile: Embed external HTML file without iframe

The panel is expecting some markup as content, not a whole HTML page.

This will load Your navigation listview inside the panel:

$(document).on('panelcreate', '#myPanel', function () {
    $(this).children(".ui-panel-inner").load("nav.html ul", function() {
        $(this).enhanceWithin().trigger("updatelayout");
    });      
});

The full-width listview is requiring some additional CSS:

/* The left reveal panel shadow is 5px inset and blurred by 5px */
.ui-panel-display-reveal.ui-panel-position-left .ui-listview {
    margin-right: -10px;
}

---

EDIT:

To test Your navigation menu and see if it looks as intended, You may design it directly inside the panel. To allow the framework to create the panelInner, simply put somewhat inside the panel div, i.e. a placeholder div or, as said, even better the static version of Your navigation menu. Thus, it will be then correctly replaced by Your external version.

In one word, instead of <!--Load nav.html here--> write <div>...</div>.

How do I load a webpage inside a div using Javascript without IFRAME and JQuery?

With difficulty…

Use Ajax (e.g. via XMLHttpRequest) to get the page. Since it is external, you will need to bypass the same origin policy.

Once you have the page, extract the relevant parts of it (probably the children of the body element) and add that to your existing DOM.

You'll need to account for differing stylesheets between your site and the external one, for relative URIs (to resources on the external site that aren't on yours), and for any scripts in the remote content.

---

Related Topics