CODEWITHSUNDEEP
html
praveenjayapal
praveenjayapal

Reputation: 38529

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

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?

Upvotes: 67

Views: 244957

Answers (15)

Alvaro Sifuentes
Alvaro Sifuentes

Reputation: 33

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

Upvotes: 3

Maestro
Maestro

Reputation: 9508

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.

Upvotes: 28

Deepak Singh
Deepak Singh

Reputation: 1145

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

Upvotes: 1

Aridane &#193;lamo
Aridane &#193;lamo

Reputation: 334

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.

Upvotes: 0

Rahul
Rahul

Reputation: 61

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>

Upvotes: 4

cptstarling
cptstarling

Reputation: 779

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>

Upvotes: 0

Sam Becker
Sam Becker

Reputation: 19636

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

Upvotes: 12

Niks
Niks

Reputation: 72

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

Upvotes: 4

kennebec
kennebec

Reputation: 104770

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.

Upvotes: 47

ashario
ashario

Reputation: 2752

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>

Upvotes: 5

ndmaque
ndmaque

Reputation: 11

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

Upvotes: -4

satels
satels

Reputation: 779

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

Upvotes: -4

Kestutis. Lithuania
Kestutis. Lithuania

Reputation: 39

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

  1. 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.
  2. 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
  3. Save this file with the name .htaccess and upload it to the server's main directory.
  4. 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.

Upvotes: 3

Daniel LeCheminant
Daniel LeCheminant

Reputation: 51081

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

Upvotes: 35

Cherian
Cherian

Reputation: 19418

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>

Upvotes: 30

Related Questions