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

Question

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?

You can use object instead of iframe, but it's no better. What do you have against iframe? — Alohci, Mar 24 '09 at 08:53
duplicate of [Include another HTML file in a HTML file](https://stackoverflow.com/questions/8988855/include-another-html-file-in-a-html-file) — João Pimentel Ferreira, Dec 28 '20 at 21:40
https://css-tricks.com/the-simplest-ways-to-handle-html-includes/ — Brian Cannard, Feb 11 '22 at 03:37

kennebec · Answer 1 · 2014-08-24T02:00:47.553

45

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.

edited Aug 24 '14 at 02:00

answered Mar 27 '09 at 18:56

kennebec

102,654
32
106
127

8

Unfortunately using OBJECT or EMBED tags also introduces HEAD/BODY tags in the included HTML, even if you don't have them in the sub-HTML. This will break validation and also cause spacing issues so this is not the best solution. – gene b. Sep 28 '17 at 16:23
@geneb. Thanks. Exactly what I was wondering. I can't figure out why you'd ever want these extraneous tags introduced. You got any idea? – Tom Russell Jan 05 '19 at 21:46

Daniel LeCheminant · Accepted Answer · 2009-03-26T00:16:14.227

35

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

edited Mar 26 '09 at 00:16

answered Mar 24 '09 at 07:14

Daniel LeCheminant

50,583
16
120
115

18

This isnt a pure HTML solution is it? – Sam Becker Mar 24 '09 at 07:15
3

Hey, here i got a idea, i have included the whole content inside the javascript - document.write. then place the javascript file inside the html. It working – praveenjayapal Mar 27 '09 at 06:15
3

If using Server Side Include (SSI) you need to be conscious that it may be difficult for your documents to be cached since the modified time and content length are all dynamic. With Apache you can use XBitHack Full (on UNIX) or mod_expires to set expiry times. I didn't end up using SSI for this reason. – steinybot Feb 10 '13 at 08:22
4

Just a remark. You need a server with SSI installed on the server for this to work, which is not always the case. – user334639 Sep 20 '13 at 12:36
I would `#include file` if it's in a higher directory in the site. – Cilan Feb 22 '14 at 22:27

Cherian · Answer 3 · 2009-03-24T07:20:24.037

29

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>

edited Mar 24 '09 at 07:20

answered Mar 24 '09 at 07:14

Cherian

19,107
12
55
69

2

Hey, here i got a idea, i have included the whole content inside the javascript - document.write. then place the javascript file inside the html. It working – praveenjayapal Mar 27 '09 at 06:18
I'm surprised that it's 2022 but we still don't have client-side SSI without IFrames and JavaScript, but have WebComponents. LOL – Brian Cannard Feb 11 '22 at 03:18
https://css-tricks.com/the-simplest-ways-to-handle-html-includes/ -- an entire article on this subject. – Brian Cannard Feb 11 '22 at 03:36

score 27 · Answer 4 · edited Jul 09 '22 at 10:22

27

You could use HTML5 for this:

<link rel="import" href="/path/to/file.html">

Update – July 2020: This feature is no longer supported by most major browsers, and is generally considered obsolete. See caniuse.com for the list of browsers which do still support it.

edited Jul 09 '22 at 10:22

simhumileco

31,877
16
137
115

answered Mar 01 '15 at 18:14

Maestro

9,046
15
83
116

this is only for webcomponent polymer – Jose De Gouveia Apr 17 '15 at 11:23
4

@Joyal no, this is part of HTML5, some browsers are already support it, but for those that don't, you can use polymer to polyfill it. http://caniuse.com/#search=import – K. Norbert Aug 12 '15 at 08:49
1

@muis , the above code will only work if you load a page from the same domain, else you get the foloowing error : No 'Access-Control-Allow-Origin' header is present on the requested resource. This is restricted due to security reasons. For more details see: http://en.wikipedia.org/wiki/Cross-origin_resource_sharing – vanessen Sep 09 '15 at 11:04
3

This won't work on a lot of web browsers, if that is an issue for someone (like me): http://caniuse.com/#feat=imports – Jdban101 Jul 06 '16 at 17:29
5

This is obsolete since Google Chrome 73. Try to avoid this solution. https://developer.mozilla.org/en-US/docs/Web/Web_Components/HTML_Imports – notionquest Jan 08 '19 at 17:03

score 11 · Answer 5 · edited Aug 26 '15 at 14:24

11

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

edited Aug 26 '15 at 14:24

moffeltje

4,521
4
33
57

answered Mar 24 '09 at 07:12

Sam Becker

19,231
14
60
80

7

when you do this: is there any way you can have links clicked inside the iframe to change the whole window? – danieldekay Sep 03 '14 at 16:08

score 5 · Answer 6 · answered Aug 12 '13 at 04:12

If you're willing to use jquery, there is a handy jquery plugin called "inc".

I use it often for website prototyping, where I just want to present the client with static HTML with no backend layer that can be quickly created/edited/improved/re-presented

http://johannburkard.de/blog/programming/javascript/inc-a-super-tiny-client-side-include-javascript-jquery-plugin.html

For example, things like the menu and footer need to be shown on every page, but you dont want to end up with a copy-and-paste-athon

You can include a page fragment as follows

<p class="inc:footer.htm"></p>

score 4 · Answer 7 · edited May 25 '15 at 05:42

4

<html>
<head>
<title>example</title>
    <script> 
   $(function(){
       $('#filename').load("htmlfile.html");
   });
    </script>
</head>
<body>
    <div id="filename">
    </div>
</body>

edited May 25 '15 at 05:42

Narendrasingh Sisodia

21,247
6
47
54

answered May 25 '15 at 05:15

Niks

72
1
4

3

I don't believe your code is going to work without include jquery. – Marcelo Agimóvel Feb 12 '18 at 13:40

score 4 · Answer 8 · answered May 06 '17 at 11:15

The best which i have got: Include in your js file and for including views you can add in this way

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>Bootstrap</title>
    <!-- Your custom styles (optional) -->
    <link href="css/style_different.css" rel="stylesheet">
</head>

<body>
    <script src="https://www.w3schools.com/lib/w3data.js"></script>
    <div class="">
      <div w3-include-html="templates/header.html"></div>
      <div w3-include-html="templates/dashboard.html"></div>
      <div w3-include-html="templates/footer.html"></div>
    </div>
</body>
<script type="text/javascript">
    w3IncludeHTML();
</script>
</html>

Note: Brave browser and possible others disable this function unless the page is being hosted on a server. The whole point of finding ways around normal SSI is for people who want to do web testing without a server and have it consistent on their server. Thus this is a deal breaker. — Joshua Robison, Jul 16 '22 at 07:28

score 3 · Answer 9 · answered Nov 06 '15 at 15:04

3

$.get("file.html", function(data){
    $("#div").html(data);
});

answered Nov 06 '15 at 15:04

Alvaro Sifuentes

33
1

7

It's best if you add some commentary and not just toss code out there. – Parkash Kumar Nov 08 '15 at 10:20

score 3 · Answer 10 · edited Aug 21 '11 at 14:56

You can say that it is with PHP, but actually it has just one PHP command, all other files are just *.html.

You should have a file named .htaccess in your web server's /public_html directory, or in another directory, where your html file will be and you will process one command inside it.
If you do not have it, (or it might be hidden (you should check this directory list by checking directory for hidden files)), you can create it with notepad, and just type one row in it:
AddType application/x-httpd-php .html
Save this file with the name .htaccess and upload it to the server's main directory.
In your html file anywhere you want an external "meniu.html file to appear, add te command: <?php include("meniu.html"); ?>.

That's all!

Remark: all commands like <? ...> will be treated as php executables, so if your html have question marks, then you could have some problems.

This was the answer I was looking for! I realized after reading this that I was doing `.` When I removed the `echo` everything worked! :) — Eric Hepperle - CodeSlayer2010, Nov 16 '22 at 14:58

score 1 · Answer 11 · answered Jun 28 '22 at 06:35

1

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

answered Jun 28 '22 at 06:35

Deepak Singh

749
4
16

Please don't use ``. It is deprecated, and has been for years. It is simply an abbreviation of `` now. – ethry Jul 02 '22 at 21:28
@ethry [MDN doesn't appear to mark it as deprecated](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/embed), nor does [the W3 wiki](https://www.w3.org/html/wiki/Elements/embed). It does however seem to be roughly equivalent to the accepted answer of using an `object` element. – Pharap Feb 01 '23 at 04:09
@Pharap I could've sworn it used to be deprecated. – ethry Feb 02 '23 at 10:14
1

@ethry Perhaps it was undeprecated? That does happen sometimes. – Pharap Feb 03 '23 at 12:43

score 0 · Answer 12 · answered Jan 21 '16 at 13:59

0

Also make sure to check out how to use Angular includes (using AngularJS). It's pretty straight forward…

<body ng-app="">
  <div ng-include="'myFile.htm'"></div>
</body>

answered Jan 21 '16 at 13:59

cptstarling

769
6
11

score 0 · Answer 13 · answered May 31 '17 at 15:13

If you are using NGINX over linux and want a pure bash/html, you can add a mask on your template and pipe the requests to use the sed command to do a replace by using a regullar expression.

Anyway I would rather have a bash script that takes from a templates folder and generate the final HTML.

score -2 · Answer 14 · answered Jan 26 '13 at 09:32

-2

confirmed roadkill, create a .htaccess file in the web root with a single line which allows you to add php code to a .html file.

AddType application/x-httpd-php .html

answered Jan 26 '13 at 09:32

ndmaque

15
2

score -2 · Answer 15 · answered Sep 15 '11 at 04:41

-2

Best solution from nginx: http://sysoev.ru/nginx/docs/http/ngx_http_ssi_module.html

answered Sep 15 '11 at 04:41

satels

789
6
13

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

15 Answers15

Linked

Related