如何在SharePoint Online页面布局中引用jQuery？求指引文件放置位置

Hey there! Let me break down the correct places and approaches to reference jQuery in your SharePoint Online page layout—this should fix your issue.

1. Reference in the <head> section (great for global dependencies) #

You can place your jQuery reference inside the <head> tag of your page layout, making sure it loads before any custom scripts that depend on it.

If you're using a public CDN (super convenient and reliable), here's what the code looks like:

<head runat="server">
    <!-- Existing page layout head content (like meta tags, CSS references) -->
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <!-- Your custom script that uses jQuery must come AFTER the jQuery reference -->
    <script src="/sites/YourSiteName/SiteAssets/your-custom-script.js"></script>
</head>

If you prefer hosting jQuery locally in your site's Site Assets library, update the path to match your site structure:

<script src="/sites/YourSiteName/SiteAssets/jquery-3.7.1.min.js"></script>

2. Reference right before </body> (optimize page load performance) #

To avoid blocking page rendering, you can load jQuery near the end of the <body> tag. This way, your page content loads first, then the scripts:

<!-- All your page layout body content goes here -->

<!-- Load jQuery and dependent scripts last -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="/sites/YourSiteName/SiteAssets/your-custom-script.js"></script>
</body>

Key things to check if it's still not working #

• Verify file paths: If using a local jQuery file, double-check it’s uploaded to the correct library (like Site Assets) and the path matches exactly. Also, ensure the library has proper permissions so users can access the file.
• Avoid version conflicts: Some SharePoint components might load an older version of jQuery automatically. If you run into conflicts, use jQuery.noConflict() to resolve it:

  var $j = jQuery.noConflict();
  // Use $j instead of $ for your jQuery code from here on, e.g. $j('.target-element').hide();
  

• Use dynamic site paths: If your page layout uses server-side tags (runat="server"), use the ~site placeholder to dynamically reference your site root, which avoids broken paths if the site is moved:

  <script src="~site/SiteAssets/jquery-3.7.1.min.js"></script>
  

If you’re still stuck, pop open your browser’s developer tools (F12) and check the Console tab—you’ll see errors like 404 (wrong file path) or $ is not defined (jQuery isn’t loading before your script) that point you to the fix.

内容的提问来源于stack exchange，提问作者user3589162