Question

服务器端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>

Answer 1

使用document.write()

<head>
<script type="text/javascript">
document.write('<link href="/use/abs/path/here/styles/marketing-plan-normalize.css" rel="stylesheet" type="text/css">');
</script>
</head>

在某些浏览器中，它无法与<base>元素一起使用，因此最好使用绝对网址。

在Chrome中，即使没有脚本插入，它也会触发引用https://developers.google.com/web/updates/2016/08/removing-document-write的控制台警告。这种情况将来可能会改变。

编辑：糟糕，我对您的案子没有给予足够的重视。恐怕不结合document.write和同步AJAX是不可能的。请不要这样做。

如何消除文件中的负载闪烁加载（最好是同步加载）？

1 个答案: