HTML how to include HEAD tag or CSS from other htm file without delay

Question

So, I can't use PHP due to ISAPI is not working together with some other ISAPI. Anyway, usually I can create index.php, and header.php then in index.php I just use include().

But now, since the files has to use .htm extension, I wonder how I can include stuff from other file e.g: if I have say index.htm and header.htm and other.htm

header.htm looks like this

  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=0">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Dashboard</title>

    <!-- Bootstrap core CSS -->
    <link href="css/customBootstrap/bootstrap.min.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="css/styles.css" rel="stylesheet">

    <!-- Fonts -->
    <link href="css/fa-4.0.3/font-awesome.min.css" rel="stylesheet" type="text/css">
    <link href='http://fonts.googleapis.com/css?family=Muli' rel='stylesheet' type='text/css'>

    <!-- Favicon -->
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <link rel="icon" href="favicon.ico" type="image/x-icon">

    <!-- Just for debugging purposes. Don't actually copy this line! -->
    <!--[if lt IE 9]><script src="../../docs-assets/js/ie8-responsive-file-warning.js"></script><![endif]-->

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->

    <!-- FontAwesome Fix for IE7 -->
    <!-- [if IE 7]>
        <link href="css/fa-3.2.1/font-awesome.min.css" rel="stylesheet" type="text/css" />
        <link href="css/fa-3.2.1/font-awesome-ie7.min.css" rel="stylesheet" type="text/css" />
    <![endif]-->

  </head>

So I want in any other file, I dont have to copy the same thing on top (so I just need to change one file).

How should I do it? I tried something like this it work. But, it has like a split second delay (so, user will see a page without css for a split second, before it load properly.

<!DOCTYPE html>
<html lang="en">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script> 
        $(function(){
          $("#header").load("../../common/header.htm"); 
        });
    </script> 

    <div id="header">
    </div>
    <body>
       ....

Any help?

Thank you

Personally, I would avoid using JavaScript to load resources for ``. With CSS files and `$(function(){...})`, you'll end up with a FOUC (http://en.wikipedia.org/wiki/Flash_of_unstyled_content) that might suck for user experience. — Jack, Jun 11 '14 at 01:50
so is your recommendation I copy ... on every single file? the problem with this if I need to add something I have to change every single file. Is there any other idea? My template pretty much the same for every page. — Harts, Jun 11 '14 at 01:51
This is a tricky question because of the unknowns! :) Personally, I would look into a build tool (especially if it's a personal site - which I have control over locally). Otherwise, in the past, I've seen developers use a templating language and break out partials that way. That could be an option as well (just minimize the FOUC, which I think might work - let me see if I can throw together a fiddle!) — Jack, Jun 11 '14 at 01:59
This is definitely not a solution, but I wanted to share! Here's a fiddle using dust: http://jsfiddle.net/qZB3V/ - And a shell http://fiddle.jshell.net/qZB3V/show/ (so you can inspect) - Both just change the title and link to a fake CSS file (nothing crazy). Thinking about it more, you could get really fancy with this. The major downside is converting things to a template. Here's one other example I threw on a server: http://jackpattishall.com/so/dust-red.html - if you're using Chrome, check out the source and then inspect the DOM. Hope this helps! — Jack, Jun 11 '14 at 02:29

score 0 · Answer 1 · answered Jun 11 '14 at 02:33

no need document ready, because you want the css to load before the other element in the body

$("#header").load("../../common/header.htm");
use absolute path for your css file in the header.htm . I doubt you can't load your css because of the css relative path

/path/to/your/css/css1.css

or

../../css/css1.css

Hope this help

score 0 · Answer 2 · edited May 23 '17 at 10:30

You can achieve this by two ways:

Using jQuery:

index.htm

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

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

header.htm

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

Or using simple html, it looks like a comment though, You can visit this link. Including HTML inside another HTML

HTML how to include HEAD tag or CSS from other htm file without delay

2 Answers2