將JS檔案載入到SharePoint環境中的方法

阿新 • • 發佈：2019-01-15

在開發SharePoint工程的時候，少不了使用JS，SharePoint允許開發者用很多種方式載入JS程式碼，以下以JQuery和SharePoint2013為例，總結了一些將自定義的JS檔案載入到SharePoint環境中的一些方法，假設JQuery檔案已經部署到SharePoint的layouts資料夾下的JSLib資料夾下（_layouts/JSLib/jquery-1.11.0.min.js）。

1. 在Master Page中加入JS：

這個是最簡單的方法，使用SPD開啟master page，找到head部分，加入如下程式碼：

<head runat="server">
. . .
<SharePoint:ScriptLink language="javascript" name="JSLib/jquery-1.11.0.min.js" Defer="false" runat="server"/>
. . .
</head>

這樣新增js，會在所有使用master page的頁面上載入js。如果希望只是在某個頁面上引入js，可以使用下面的方法。

2. 在Application Page（應用程式頁面）中載入js：

首先這個application page要繼承master page，然後在其中的PageHead這個 content place holder中新增如下程式碼（因為是SharePoint 2013，所以路徑中包含15，這個方法不能用在Sandbox中）：

<asp:Content ID="PageHead" ContentPlaceHolderID="PlaceHolderAdditionalPageHead"runat="server">
    <script src="/_layouts/15/JSLib/jquery-1.11.0.min.js" type="text/javascript"></script>
</asp:Content>

3. 使用custom action新增js。

使用VS工程向SharePont新增一個custom action，向其中的elements.xml中新增如下配置（因為是SharePoint 2013，所以路徑中包含15，這個方法不能用在Sandbox中）：

<CustomAction
    ScriptSrc="/_layouts/15/JSLib/jquery-1.11.0.min.js"
    Location="ScriptLink"
    Sequence="100">
</CustomAction>

4. 在後臺程式碼的頁面事件中動態載入js：

protected override void OnPreRender(EventArgs e)
{
    //註冊"_layouts/JSLib/jquery-1.11.0.min.js"
    ScriptLink.Register(this.Page, "JSLib/jquery-1.11.0.min.js", false);
    base.OnPreRender(e);
}

5. 使用SharePoint 2013的Script Editor Web Part載入js（SharePoint 2010中是Content Editor Web Part）

6. 使用RequireJS載入JS，這個方法與2一樣，也是在application page中新增js，但是這個方法可以防止jquery的衝突。

首先建立一個SharePoint專案，資料夾結構如下：

其中require.js是RequireJS的原始檔，jquery-1.11.0.min.js是JQuery的原始檔，main.js是requirejs的配置檔案，其中配置jquery的路徑，同時使用noConflict避免jquery的衝突：

最後一個LoadJQuery.js檔案是頁面“LoadJQuery.aspx”使用的js檔案，其中簡單的定義了兩個方法：

其中第一個方法getJqueryVersion請求jquery檔案，使用myjquery物件替代了$，然後顯示請求的jquery的版本；第二個方法判斷$這個全域性物件是否存在。

最後一個檔案是“LoadJQuery.aspx”，這個頁面引用了requirejs，添加了兩個button，第一個button呼叫“getJqueryVersion”方法，第二個呼叫“noJquery”方法：

<asp:Content ID="PageHead" ContentPlaceHolderID="PlaceHolderAdditionalPageHead" runat="server">
    <script type="text/javascript" src="/_layouts/15/SharePoint.TestLab.JQuery/js/require.js" data-main="/_layouts/15/SharePoint.TestLab.JQuery/js/main"></script> //載入requirejs檔案，同時指定配置檔案main.js
    <script type="text/javascript" src="/_layouts/15/SharePoint.TestLab.JQuery/js/LoadJQuery.js"></script> //載入LoadJQuery.js
</asp:Content>

<asp:Content ID="Main" ContentPlaceHolderID="PlaceHolderMain" runat="server">
    Test JS
    <button onclick="getJqueryVersion();return false;">Require</button> //第一個button呼叫getJqueryVersion方法
    <button onclick="noJquery();return false;">No jquer</button>    //第二個button呼叫noJquery方法
</asp:Content>

頁面效果是：

當點選Require按鈕時，彈出：

當點選No jquery按鈕的時候彈出：

可以看到兩個方法互不影響，jquery只在getJqueryVersion方法中有效。

將JS檔案載入到SharePoint環境中的方法

將JS檔案載入到SharePoint環境中的方法

如何將class檔案載入在JVM中。

動態引入的外部 JS 檔案在各瀏覽器中的載入順序不一致問題解決

前端設計中關於外部js檔案載入的速度優化

在myeclipse中對匯入js檔案時報錯的解決方法

將Excel檔案匯入MySQL資料庫的方法

Java讀js檔案，獲取object中的值

selenium 整合 spring 使用maven 將配置檔案打包到jar中

node之實現一個隨專案啟動將資料庫配置載入到記憶體中

React Native 匯入獨立模組ES6寫法將js檔案模組化方式

通過Load table命令將資料檔案載入到Sybase IQ資料庫裡面的Python指令碼

jQuery的js檔案載入失敗的原因

java POI 將txt檔案匯入到excel中

解決將txt檔案匯入到sqlserver中亂碼問題

html、css、js檔案載入順序及執行情況

java 將 properties 檔案載入到記憶體

Android如何將大檔案打包到APK中

apache 下圖片顯示不完整 JS檔案載入不完全的解決辦法

如何實現將JS動態新增的TR中的值傳到後臺中並批量插入

如何將xls檔案匯入到mongoDB中?

將JS檔案載入到SharePoint環境中的方法

相關推薦