引导 jquery 加载序列

Posted 2023-05-08

【中文标题】引导 jquery 加载序列

【英文标题】：bootstrap jquery load sequence

【发布时间】：2018-08-18 16:06:18

【问题描述】：

我在页面中有这行代码来触发模态：

<?php if($modal_show)?>
<script>$('#modalContactForm').modal('show');</script>
<?php  ?>

jQuery 等的负载位于 之前的脚本末尾，这是推荐的方法。用于测试 $modal_show 在页面加载时设置为 true。如果我将负载移到顶部，则模态会按预期显示，但是当它们位于末尾时，则不会显示。我已经阅读了其他解决方案，使用 javascript 窗口 onload 或使用 defer 语句。有人可以向我展示我需要放在那里的实际代码，以将负载保持在最后并让脚本触发模态。

【问题讨论】：

这里的问题是php在服务器端执行，而javascript在客户端，所以php尝试执行尚未加载的脚本。

是的，这完全有道理，但似乎应该有一些简单的方法来解决它，因为 twitter bootstrap 建议在页面末尾进行加载。看不到它是如何正常工作的，因为您需要在页面中使用它。

为什么不将php脚本加载到页面的最后，就在正文结束标记的上方，脚本的下方？

假设我在页脚（例如）中执行一个 php 脚本，然后我想在该 php 块中显示模态。有没有办法做到这一点？

您可以将模态框放在您想要的任何位置。 id 将扮演关键角色，我有一个具有多个模式的项目，在需要时由脚本加载。所以它应该工作。只需调用模态ID

【参考方案1】：

您需要先加载 jquery/bootstrap-jquery 库，然后再加载您的脚本，这样您的脚本才能正常工作。

您可以使用$(document).ready()

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> //LOAD THE LIBRARY FIRST
 <script> //THEN YOUR SCRIPT
 $(document).ready(function()
       $('#modalContactForm').modal('show');
 ); // TRIGGERS UPON THE PAGE IS COMPLETELY LOADED
 </script>

或者简写

 <script>
 $(function() 
    $('#modalContactForm').modal('show');
 );
 </script>

【讨论】：

有什么办法可以先加载 jquery 吗？我可以在脚本顶部加载 jquery，但引导程序建议将它放在底部。在某些情况下，我需要在页面结束之前触发内联模式。

注意问题下的Vipin cmets。