Серверная сторона include здесь не работает, так как традиционно не "обслуживается".
Я пытаюсь импортировать содержимое заголовка из общего файла, чтобы уменьшить общий код (я делаю это с другими общими элементами на всех страницах просто отлично), но, поскольку он включает в себя стили, он вызывает мерцание в форма неустановленных элементов.
В настоящее время я использую jQuery для асинхронной загрузки контента (что не оптимально, но я не нашел синхронного решения, которое действительно работает), но я более чем открыт для ванильного решения JS, поэтому есть не накладные расходы на необходимость сначала загружать jQuery (чтобы уменьшить задержку, несмотря на то, что она размещена локально).
Вот существующий код:
plan.html:
<head>
<script type="text/javascript" src="scripts/jquery-1.11.1.min.js"></script>
<script>$(function(){ $("head").load("head.html") }); </script>
</head>
head.html:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="robots" content="noindex, nofollow">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--Styles/Fonts-->
<link href='//fonts.googleapis.com/css?family=Oswald:400,300,700' rel='stylesheet' type='text/css'>
<link href="styles/marketing-plan-normalize.css" rel="stylesheet" type="text/css">
<link href="styles/marketing-plan-styles.css" rel="stylesheet" type="text/css">
<!--IE Compatibility - Modernizr-->
<script type="text/javascript" src="scripts/modernizr.js"></script>
<!-- Adding the favicon -->
<link rel="shortcut icon" type="image/png" href="images/js-logo-small.png"/>
<title>Sales and Marketing Planner</title>