How to Include an HTML Page into Another HTML Page Without Frame/Iframe

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" -->

I need to link to another HTML page inside my current HTML page using JavaScript or HTML

If you don't want to use JQuery or iframes, I suggest you use html object tag.

Create 2 HTML files. In my example, one.html and two.html

one.html

<div id="display"></div>

<script>
function load_anotherpage() {
 document.getElementById("display").innerHTML='<object type="text/html" data="two.html"></object>';
}

load_anotherpage();
</script>

two.html

<h1>Hello</h1>

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

Include another HTML file in a HTML file

In my opinion the best solution uses jQuery:

a.html:

<html> 
  <head> 
    <script src="jquery.js"></script> 
    <script> 
    $(function(){
      $("#includedContent").load("b.html"); 
    });
    </script> 
  </head> 

  <body> 
     <div id="includedContent"></div>
  </body> 
</html>

b.html:

<p>This is my include file</p>

This method is a simple and clean solution to my problem.

The jQuery .load() documentation is here.

Load a HTML page within another HTML page

iframe is the tag which you can use for call other html pages into your web page

<iframe src="http://www.google.co.in" name="targetframe" allowTransparency="true" scrolling="no" frameborder="0" >
    </iframe>

How to display another html document in place of a standard blog post?

I think that you can directly show your html file if you put it directly in the blog folder. The name of the html file would be used as the slug. However, if your html page does not contain your template, you may not want that.

Use iframe

Hence, you can add your html file as an iframe:

---
title: 'Example blog post'
author: Logit
date: '2018-02-21'
---

<iframe width="100%" height="150" name="iframe" src="/files/page_to_display_instead.html"></iframe>

Auto resize iframe to fit content

And if you do not want that your visitors see it as an iframe, you can use some javascript to auto resize the iframe.

You need to add this in the "head" of your theme:

<script>
  function resizeIframe(obj) {
    obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
  }
</script>

Then your post will be:

---
title: 'Example blog post'
author: Logit
date: '2018-02-21'
---

<iframe width="100%" height="150" name="iframe" src="/files/page_to_display_instead.html" frameborder="0" scrolling="no" onload="resizeIframe(this)"></iframe>

make HTML page's element accessible in another HTML page

you should use the main.html's window object to assign the function to. So instead of

function hideFrame(){
    document.getElementById("myFrame").style.display = "none";
}

you would do something like

window.hideFrame = function(){
    document.getElementById("myFrame").style.display = "none";
}

Now the function is globally scoped on main.html's window.

The child frame has it's own window object. You need access to the parent window object to call the function from child.html.

From main.html, you can call hideFrame normally on click onclick = hideFrame(), but in child.html, you should put onclick = window.parent.hideFrame()

How to Include an HTML Page into Another HTML Page Without Frame/Iframe