SharePoint 2013套件栏左侧添加链接失败，寻求可行解决方案

嘿，我来帮你搞定这个问题！你之前的JavaScript没达到预期效果，大概率是两个核心原因：DOM加载时机不对，或者你用了append把链接加到了右侧而非左侧。下面给你几个靠谱的解决方案：

方案一：修正JavaScript代码（优先推荐） #

SharePoint页面很多元素是动态加载的，直接运行脚本可能找不到目标元素，而且你之前的代码是把链接追加到右侧，要放左侧得用prepend。试试这个修改后的代码：

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js"></script>
<script>
// 确保SharePoint核心脚本加载完成后再执行
SP.SOD.executeFunc('sp.js', 'SP.ClientContext', function() {
    // 等待DOM完全就绪
    $(document).ready(function() {
        var customLi = "<li class='ms-core-suiteLink'><a class='ms-core-suiteLink-a' target='_blank' href='https://rootsite/SitePages/Home.aspx'>Home</a></li>";
        // 精准定位套件栏的ul容器
        var suiteLinksUl = $("#suiteLinksBox > ul.ms-core-suiteLinkList");
        
        if(suiteLinksUl.length > 0){
            // prepend把元素加到最前面（左侧），append是加到最后（右侧）
            suiteLinksUl.prepend(customLi);
        } else {
            // 如果ul不存在，就创建一个再添加链接
            $("#suiteLinksBox").html('<ul class="ms-core-suiteLinkList">' + customLi + '</ul>' );
        }
    });
});
</script>

关键改进点： #

• 用SP.SOD.executeFunc确保SharePoint核心脚本加载完成，避免找不到页面元素
• 替换append为prepend，把链接放到套件栏左侧
• 更精准的选择器定位套件栏的ul容器

方案二：通过Script Editor Web Part部署脚本 #

如果直接粘贴代码没效果，试试把代码放到Script Editor Web Part里：

1. 编辑要修改的SharePoint页面
2. 点击“插入”选项卡 → 选择“Web 部件”
3. 在“媒体和内容”分类里找到“脚本编辑器”，添加到页面
4. 编辑脚本编辑器，粘贴上面的代码，保存页面

方案三：直接修改母版页（适合有权限的场景） #

如果你有站点集管理员权限，直接修改母版页是最稳定的方法：

1. 打开SharePoint设计器，连接到你的站点
2. 找到并编辑当前使用的母版页（比如seattle.master）
3. 搜索找到<ul class="ms-core-suiteLinkList">标签
4. 在这个标签的最开头添加你的链接代码：

<li class='ms-core-suiteLink'><a class='ms-core-suiteLink-a' target='_blank' href='https://rootsite/SitePages/Home.aspx'>Home</a></li>

5. 保存母版页，发布后所有使用该母版页的页面都会显示这个链接

排查小技巧 #

如果还是没效果，打开浏览器控制台（F12）看看有没有报错：

• 检查jQuery是否加载成功（控制台输入$，如果返回函数说明加载正常）
• 检查#suiteLinksBox元素是否存在（控制台输入$("#suiteLinksBox")，看返回的长度是否大于0）
• 检查是否有自定义CSS覆盖了链接的样式（比如设置了display:none）

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