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

praveenjayapal_38172 0
Viewed 225655

I want to include an HTML page inside an HTML page. Is it possible?

I don't want to do it in PHP, I know that in PHP, we can use include for this situation, how can I achieve the same purely in HTML without using the iframe and frame concept?

html
15 Answers

You can use an object element

<object type="text/html" data="urltofile.html"></object>

or, on your local server, AJAX can return a string of HTML (responseText) that you can use to document.write a new window, or edit out the head and body tags and add the rest to a div or another block element in the current page.

user_808600

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

If you mean client side then you will have to use JavaScript or frames.
Simple way to start, try jQuery

$("#links").load("/Main_Page #jq-p-Getting-Started li");

More at jQuery Docs

If you want to use IFrames then start with Wikipedia on IFrames

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
        <title>Example</title>
  </head>
  <body>
        The material below comes from the website http://example.com/
        <iframe src="http://example.com/" height="200">
            Alternative text for browsers that do not understand IFrames.
        </iframe>
   </body>
</html>
Cherian_220390 
<iframe src="page.html"></iframe>

You will need to add some styling to this iframe. You can specify width, height, and if you want it to look like a part of the original page include frameborder="0".

There is no other way to do it in pure HTML. This is what they were built for, it's like saying I want to fry an egg without an egg.

user_597300

In 2022

In HTML without iframe

<div id="display" style="width: 100%;float: left;"></div>

<script>
  function load_anotherpage() {
    document.getElementById("display").innerHTML =
      '<embed type="text/html" src="https://libcon.in/" width="100%" height="800" >';
  }

  load_anotherpage();
</script>

want more then use this link

user_167107380
Related