Question

如果已经在某个地方回答过，我会很感激我找不到的链接。

我用其中任何一个加载.php页面直接$singleD = call_user_func_array('array_merge', $multiD);或使用

按钮/链接操作

<?php include 'header.php'; ?>

有些孩子需要相同的.css＆amp;其他文件作为其父文件，所以我会使用以下代码加载

<a href="#" data-toggle="modal" role="button" data-target="#genericModal" onclick="loadModalContent(\'profil.php\',\'genericModal\')">.

然后我有两个文件：

parent.php

function loadStyleSheet(uri){
    //jquery might not be loaded yet, so do long form
    var ss = document.styleSheets;
    for (var i = 0, max = ss.length; i < max; i++) {
        if (ss[i].href.indexOf(uri) > -1){
            return;
        }
    }
    var styleSheet = document.createElement("link");
    styleSheet.href = uri;
    styleSheet.rel = "stylesheet";
    styleSheet.type = "text/css";
    document.getElementsByTagName("head")[0].appendChild(styleSheet);
};

和

child.php（没有HTML，没有头部或身体）

<html>
    <head>
        <link rel="stylesheet" href="css/bootstrap.css"/>
        <link....something else and more....
    </head>
    <body>
        load in one way or another the child.php
    </body>
</html>

但我现在的问题是，浏览器如何应对它。因为基本上父母已经通过他的<script> loadStyleSheet("css/bootstrap.css"); loadStyleSheet("css/child.css"); </script> <div class="xyz"> something more here </div>并正在构建页面并且在中间的某个地方我告诉他加载一些其他代码哦顺便说一下，用javascript将.css添加到他的<head></head> （我的子文件中没有<head>个）。浏览器如何对此作出反应？

我知道我可能会使用加载器，但是现在想要避免它们。

我也可以将所有的孩子.css添加到父母身上，但为了清晰和按需加载，设计师希望将它们留在孩子们身上.phps

提前致谢！

Answer 1

浏览器应该立即响应DOM更改 - 包括添加样式表。

然而，＆＃34;马上＆＃34;是有限的，因为浏览器运行单线程的东西，因为它需要实际加载样式表（可能从远程位置）。

通常当任何修改DOM的脚本结束时，都会发生重新渲染。（这可能基本上意味着内联脚本的GROUP BY标记，或者当事件触发脚本时事件处理程序返回...）

因此，如果您使用调试器，您会看到</script>元素在执行以下行时显示在头部下方：

<link>

但该页面还没有重新渲染。

但即使重新呈现DOM ，如果新样式表资源没有时间加载，则呈现的页面也不会显示更新。对于用户来说，似乎在某个未指定的时间应用样式表，而不是完成创建document.getElementsByTagName("head")[0].appendChild(styleSheet);元素的脚本。

Answer 2

我建议您首先要添加父母和孩子所需的所有CSS。如果您需要清晰，可以将其拆分为两个文件并将它们都添加。

但是，如果您不能在<style>标记内加载样式规则而不是<link>

当然如果你把css放在<style>里面你没有利用浏览器的缓存，但如果你担心不使用它，为什么不加载所有首先是css

查看this网站

Answer 3

我不知道这是否正是您正在寻找的，但它是可能适合您所需应用的概念验证。

<link rel="stylesheet" href="~/lib/font-awesome/css/font-awesome.css" media="none" onload="$_font_awesome_media = this; console.log($_font_awesome_media.media); $_font_awesome_media.media='all'" />

<button type="submit" onclick="$_font_awesome_media.media='none'">Send Emails</button>

该按钮将操作媒体查询以关闭font-awesome.css文件。您可以使用此技术显示要在子模块中显示的.css文件。

只需使用以下JavaScript即可启用它。

$_font_awesome_media.media='all'

请注意，这可能是一个＆＃34; hack＆＃34;但是，它以一种非常有效的方式完成了工作。 css文件将在后台下载，因此它不会使网站最初加载速度变慢。如果Javascript被禁用，您将需要确定如何单独处理。

什么时候动态加载的CSS进入头部才能执行

3 个答案: