Question

对于我正在编写的程序，我有一个主导航页面，用户在登录系统后登陆。

在这个屏幕上，我使用2个DIV的一个div用于导航栏，第二个用作iFrame。

我正在使用w3.css库来创建导航栏，但是当我在第二个div中加载目标文件时，这实际上搞乱了我的CSS主CSS文件。但是如果我使用我真的不喜欢的iFrame，它的工作正常。

如果我在div加载目标链接文件时可以加载我的CSS文件，问题就会解决。

所以我的问题是如何在加载外部文件时将CSS文件加载到div中。

这是我的HTML：

<html>
<head>
<title>Time Sheet</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!-- Style Sheets -->
<link rel="stylesheet" type="text/css" href="../../CSS/w3.css">
<link rel="stylesheet" type="text/css" href="../../CSS/main.css">


<!-- Java Scripts -->
<script language="JavaScript" type="text/javascript" src="../../jScripts/jquery-3.2.0.min.js"></script>
<script language="javascript" type="text/javascript" src="../../jScripts/navBar.js"></script>
<script language="JavaScript" type="text/javascript" src="../../jScripts/fileLoader.js"></script>

    </head>
<body>
<div class="w3-bar w3-light-gray w3-card-4" style="z-index: 991">
<a href="listUser.php" target="container" id="main" class="w3-bar-item w3-button w3-hover-light-blue">Home</a>
<a href="#" class="w3-bar-item w3-button w3-hover-light-blue">Link 1</a>
<a href="#" class="w3-bar-item w3-button w3-hover-light-blue">Link 2</a>
<a href="#" class="w3-bar-item w3-button w3-hover-light-blue w3-right">Link 3</a>
</div>
<div id="My-container">
<!--  All pages load here  -->
</div>


</body>
</html>

我的NavBar JavaScript：

$(document).ready(function(){

    $('#main').click(function () {
        $('#My-container').load('listUser.php');
    })

});

文件加载器JavaScript：

$(document).ready(function(){

    if($("#my-container").size>0){
        if (document.createStyleSheet){
            document.createStyleSheet('../../CSS/main.css');
        }
        else {
            $("head").append($("<link rel='stylesheet' href='../../CSS/main.css' type='text/css' media='screen' />"));
        }
    }
});

上面的文件加载器功能不是我的，我发现它在一个网站上并尝试使用它但是当我做控制台抛出一个错误说“大小”不是一个功能。当我将其更改为长度时，错误消失但代码不起作用。

如果有人问你为什么不复制粘贴导航栏到所有文件，我的回答是我很懒。

请以任何方式告诉我光明。

Answer 1

您似乎想要检查是否存在特定的dom。为此，您需要使用length。此外，dom ID似乎是My-container，但不是my-container。

您可以尝试以下

if($("#My-container").length>0){
// rest of the code
}

使DIV加载CSS文件

1 个答案: