How to call javascript function on Quick Launch Navigation Item click?

Question

I am working with SharePoint Online.

I have a requirement where I have to add Quick Launch Navigation Item and call JavaScript function on click of the item. I am using code shown here.

Following is my code:

var oQuickLaunchColl;
function addNavigation() {
    var clientContext = new SP.ClientContext();
    var oWeb = clientContext.get_web();
    oQuickLaunchColl = oWeb.get_navigation().get_quickLaunch();
    var oNavigation = new SP.NavigationNodeCreationInformation();
    oNavigation.set_title("Start new Chat");
    oNavigation.set_url('javascript:callNavigationAction()');
    oQuickLaunchColl.add(oNavigation);
    clientContext.load(oQuickLaunchColl);
    clientContext.executeQueryAsync(QuerySuccess1, QueryFailure1);
}
function QuerySuccess1() {
    //Get the item count of navigation nodes and loop through it  
    var itemCount = oQuickLaunchColl.get_count();
    console.log("The navigation node details are:");
    for (var i = 0; i < itemCount; i++) {
        var title = oQuickLaunchColl.get_item(i).get_title();
        console.log(title);
    }
}
function QueryFailure1(sender, args) {
    console.log('Request failed' + args.get_message());
}

Here I got error,

The URL format was invalid.

Note: I have also added item in Edit Control block of list item, also new action in Site Action menu, there I have used following code to call JavaScript function,

set_url('javascript:callNavigationAction()')

Here, my JavaScript function executed.

But when I tried the same approach for calling JavaScript function from Quick Launch Navigation it failed.

How can I call JavaScript function from Quick Launch Navigation item?

Answer 1

That JSOM API only accepts local references or full URI external references

So one option is to create a distinct URI that is accepted:

function addNavigation(title,url) {
    var clientContext = new SP.ClientContext();
    var oQuickLaunchColl = clientContext.get_web().get_navigation().get_quickLaunch();
    var oNavigation = new SP.NavigationNodeCreationInformation();
    oNavigation.set_title(title);
    oNavigation.set_url(url);
    oNavigation.set_isExternal();
    oQuickLaunchColl.add(oNavigation);
    clientContext.load(oQuickLaunchColl);
    clientContext.executeQueryAsync(
        function(){
            var itemCount = oQuickLaunchColl.get_count();
            for (var i = 0; i < itemCount; i++) {
                var item=oQuickLaunchColl.get_item(i);
                console.log({
                    title : item.get_title(),
                    url:item.get_url()
                });
            }
        }
        ,
        function QueryFailure1(sender, args) {
            console.error('Request failed' + args.get_message());
        }
    );
}
addNavigation('test2',"http://myjavascript.test2");

---

And then

on every page load!

Execute script that rewrites the HREF tag:

document.querySelectorAll("a[href*='myjavascript']").forEach(function(element){
   var title=element.href.split('myjavascript.')[1].split('/')[0];
   console.info(title);
   if(title==='test2') element.href="javascript:alert('Hello World!')";
});