Question

确实是nooby问题，但无法在此站点上找到它，也无法使其正常工作。

将CDN放入页眉/页脚时，如何使javascript和jquery正常工作？当我将CDN和标记直接包含在HTML中时，我的JavaScript正常工作，但是我希望将我的JavaScript放置在其他页面上，而不是将其包含在HTML视图页面中。

我看不出有什么问题。也许你可以帮忙吗？

这有效

<div class="form-group">
                            <label for="caption">Event Description</label>
                            <script src="https://cdn.ckeditor.com/ckeditor5/12.3.1/classic/ckeditor.js"></script>
                             <textarea class="form-control" name="event_description" id="body" cols="30" rows="20"></textarea>
                             <script>
                                ClassicEditor
                                    .create( document.querySelector( '#body' ) )
                                    .catch( error => {
                                        console.error( error );
                                    } );
                                </script>
                          </div>

但这不是

我有

<?php require_once("includes/header.php"); ?>
<?php require_once("includes/footer.php"); ?>

在HTML视图页面的所有顶部和底部。

这是我的页眉和页脚

<?php ob_start(); ?>
<?php require_once("init.php"); ?>



<!DOCTYPE html>
<html lang="en">

<head>

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

    <title>SB Admin - Bootstrap Admin Template</title>



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

    <!-- Custom CSS -->
    <link href="css/sb-admin.css" rel="stylesheet">

    <!-- Custom Fonts -->
    <link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[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.4.2/respond.min.js"></script>
    <![endif]-->


    <link href="css/styles.css" rel="stylesheet">

</head>

<body>

    <div id="wrapper">

页脚

  </div>
    <!-- /#wrapper -->

    <!-- jQuery -->

    <script src="js/scripts.js"></script>



    <!-- Bootstrap Core JavaScript -->

     <!-- jQuery -->

    <script src="js/jquery.js"></script>
    <script src="js/bootstrap.min.js"></script>


    <!-- WYSIWYG -->
     <script src="https://cdn.ckeditor.com/ckeditor5/12.1.0/classic/ckeditor.js"></script>





</body>

</html>

这是scripts.js页面

  ClassicEditor
        .create( document.querySelector( '#body' ) )
        .catch( error => {
            console.error( error );
        } );

$(document).ready(function(){

    alert('hello');

});

不确定在scripts.js页面上为什么什么都不起作用。警报不起作用。我也引用了JQuery.js。

谢谢

Answer 1

 </div>
    <!-- /#wrapper -->    

     <!-- jQuery -->    
    <script src="js/jquery.js"></script>

       <!-- Bootstrap Core JavaScript -->
    <script src="js/bootstrap.min.js"></script>

       <!-- WYSIWYG -->
    <script src="https://cdn.ckeditor.com/ckeditor5/12.1.0/classic/ckeditor.js"></script>

        <!-- MY JS -->
    <script src="js/scripts.js"></script>

</body>

</html>

只需在页脚中进行以下更改，一切都会正常运行。

关于将JS保留在页眉和页脚中 在结束的<script>标记上加上</body>-标记，这将防止在实际加载页面之前无休止地为Javascript文件加载页面。以前将JavaScript代码放在页眉中是趋势，但现在由于SEO和网站性能，最好将JavaScript放在页脚中。是的，这意味着所有的js代码。

将来如何避免此类问题？ 您首先需要包括代码和其他库所需的依赖项。像jQuery是大多数库引导程序，fancybox，jQuery完整日历等所必需的。因此，首先包含jQuery库，然后包含其他js库（如果它们具有除自定义javascript之前所包含的其他依赖项之外的其他依赖项）。它与您在代码中定义的内容相同。如果在定义之前尝试使用它怎么办？绝对不可能...

现在CSS依赖性如何？ 始终将它们包含在标记的标题中。

Answer 2

您应该将<script src="js/scripts.js"></script>放在JQuery和其他依赖项之后。因为您的script.js在导入之前就使用了JQuery。

无法获取JavaScript，JQuery可以与我的PHP一起使用

2 个答案: