Best IT Recipes

How to embed an HTML page in another HTML page without a / iframe?

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

I do not want to do this 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 concepts of iframe and frame

+45
html
Mar 24 '09 at 7:08
source share
14 answers

If you are just trying to insert your own HTML from another file and consider Server side Include to be "pure HTML" (because it looks like an HTML comment and does not use something "dirty" like PHP):

 <!--#include virtual="/footer.html" -->
+32
Mar 24 '09 at 7:14
source share

You can use an object element

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

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

+37
Mar 27 '09 at 18:56
source share

If you mean the client side, you will have to use JavaScript or frames.
Easy way to get started, try jQuery

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

More in jQuery Docs

If you want to use IFrames, 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>
+26
Mar 24 '09 at 7:14
source share

You can use HTML5 for this:

  <link rel="import" href="/path/to/file.html">
+21
Mar 01 '15 at 18:14
source share
 <iframe src="page.html"></iframe>

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

There is no other way to do this in pure HTML. This is what they were built for, as if I want to fry an egg without an egg.

+14
Mar 24 '09 at 7:12
source share

If you want to use jquery, there is a convenient jquery plugin called "inc".

I often use it to create prototypes of websites where I just want to present static HTML to the client without a backend layer that can be quickly created / edited / improved / resubmitted

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

For example, things like menus and footers should appear on every page, but you don’t want to end up copying and pasting

You can include a page fragment as follows

 <p class="inc:footer.htm"></p>
+5
Aug 12 '13 at 4:12
source share
 <html> <head> <title>example</title> <script> $(function(){ $('#filename').load("htmlfile.html"); }); </script> </head> <body> <div id="filename"> </div> </body>
+5
May 25 '15 at 5:15
source share
 $.get("file.html", function(data){ $("#div").html(data); });
+4
Nov 06 '15 at 15:04
source share

You can say that this is with PHP, but in fact it has only one PHP command, all the other files are just * .html.

  • You must have a file named .htaccess in the web server directory / public_html or in another directory where your html file will be located, and you will process one command inside it.
  • If you don’t have it (or it can be hidden (you should check this list of directories by specifying a directory for hidden files)), you can create it using notepad and simply type one line in it:
    AddType application/x-httpd-php .html
  • Save this file as .htaccess and upload it to the server’s main directory.
  • In your html file, anywhere an external meniu.html file is required, add the te command: <?php include("meniu.html"); ?> <?php include("meniu.html"); ?> .

What all!

Note: all commands such as <? ...> <? ...> will be processed as php executables, so if your html has question marks, then you may have some problems.

+1
Aug 21 '11 at 13:17
source share

The best I have: Include in your js file and include the 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>
+1
May 6 '17 at 11:15
source share

Also be sure to check how to use Angular includes (using AngularJS ). This is pretty straight forward ...

 <body ng-app=""> <div ng-include="'myFile.htm'"></div> </body>
0
Jan 21 '16 at 13:59 on
source share

If you use NGINX on top of Linux and want to get pure bash / html, you can add a mask to your template and pass requests to use the sed command to replace with the regullar expression.

In any case, I would rather have a bash script that takes from the templates folder and generates the final HTML.

0
May 31 '17 at 3:13 p.m.
source share

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

-one
Sep 15 2018-11-11T00:
source share

confirmed by roadkill, create the .htaccess file in the root of the web pages in one line, which allows you to add php code to the .html file.

AddType / x-httpd-php.html Application

-2
Jan 26 '13 at 9:32
source share


More articles:


All Articles