Add link to sharepoint suite bar - fail on first load

问题

I'm trying to use JavaScript to add a custom link to the suite bar in SharePoint (SharePoint 2016 on premise). The code works fine except for the first time I load the SharePoint site. Here it is:

<script>
    var raiseFunc = function() {
        var link = document.createElement('a');
        var linktext = document.createTextNode("Google");
        link.href = "http://www.google.ca"
        link.setAttribute("class", "o365button o365cs-nav-appTitle o365cs-topnavText");
        var span = document.createElement('span');
        span.appendChild(linktext);
        span.setAttribute("class", "o365cs-nav-brandingText");
        link.appendChild(span);
        var temp = document.getElementById("Sites_BrandBar");
        temp.parentElement.appendChild(link);
    };

    _spBodyOnLoadFunctions.push(raiseFunc);
</script>

When I refresh the page or navigate around, everything works. It just doesn't work when I open the page from a new window or tab. (I have the MDS feature disabled.) It seems like the suite bar is not available when the code runs for the first time, even though I'm delaying my code using the _spbodyOnLoadFunctions technique.

Any ideas?

Update: On Matt's suggestion in the comments, I put in try/catch to get any errors. No errors are reported but I did notice a change in behaviour. I did about 20 tests in a row and sometimes the new link is added fine, sometimes it is not, and sometimes it is added for a second and then disappears.

I also tried putting an alert in the code before this line:

var temp = document.getElementById("Sites_BrandBar");

The delay is execution makes it work so clearly it is a timing thing. I assume that sometimes the suite bar is not ready when the code runs. I added a timeout as a test:

setTimeout(function(){
    var temp = document.getElementById("Sites_BrandBar");
    temp.parentElement.appendChild(link);
}, 500);

This fixes the issue but I don't like the idea of using a timeout every time the page runs.

Any ideas on how to delay the code execution until the suite bar is ready?

回答1:

As per Matt's comment, this worked:

"Try to make your add link into a function and use SP.SOD.executeFunc('sp.js','SP.ClientContext', yourFunctionToInsertHere); I believe it's the sp.js that is not loading before you are trying to add it. This should delay your add until it's loaded."

Thanks!

回答2:

I think it's being done using a Custom Action, but can't be certain.

One way to test it is to put the file into a .js file and then add it as a Custom Action using the excellent script, which John Liu built.

http://johnliu.net/blog/2015/12/the-safest-future-proof-way-to-brand-your-sharepoint-and-sharepoint-online

The other way is to maybe use the PnP PowerShell cmdlets using;

Add-PnPJavaScriptBlock -Name SuiteBar -Script '<your code here>' -Sequence 9999 -Scope Site

来源：https://stackoverflow.com/questions/47061058/add-link-to-sharepoint-suite-bar-fail-on-first-load

标签

javascript

sharepoint

sharepoint-2016