CODEWITHSUNDEEP
javascriptpdfurlwindow
David J.
David J.

Reputation: 1913

update current page number of pdf opened in new browser tab

I have a function I'm using to open PDF's in a new tab of the browser. The user may want to navigate to a different page than the one opened, so page can also be updated by the function:

 openpdf: function(url, page, pageCount){
     try {
     console.log('the page count is ' + pageCount);
     var page = new Number(page) + new Number(pageCount);        
     if (mobileAndTabletcheck()){
         console.log('mobile detected');
         return window.open(url + '#page' + page, 'somename');
     }
     console.log('no mobile detected')
     return window.open(url + '#page=' + page, 'somename');
     }
     catch(e){
     console.log(e)
     }
 },

The problem I'm having is that when the user clicks to navigate to the new page of the pdf, the URL is updated with the correct page number, but the viewer stays on the page originally opened.

Does anyone know how to make the current page update when the URL is updated?

Upvotes: 1

Views: 486

Answers (1)

Kishor V
Kishor V

Reputation: 441

You may use the local storage as a location to keep track of the open documents. I believe that the pdf viewer and the main page stays on the same domain. SO you may try something like this.

openpdf: function(url, page, pageCount){
 try {
 console.log('the page count is ' + pageCount);
 var page = new Number(page) + new Number(pageCount);        
 if (mobileAndTabletcheck()){
     console.log('mobile detected');
     return window.open(url + '#page' + page, 'somename');
 }
 console.log('no mobile detected')
 return window.open(url + '#page=' + page, 'somename');
 }
 catch(e){
 console.log(e)
 }
 var openedLinks = JSON.parse(localStorage.getItem("links"));
 openedLinks.push("Your URL here");
 localStorage.setItem("links", JSON.stringify(names));
}

On the pdf viewer page, just update the local storage.

  onpageChanged : function(){
     var openedLinks = JSON.parse(localStorage.getItem("links"));
     var index = items.indexOf("Your current Url");
     if (index !== -1) {
         openedLinks[index] = "Your updated URL";
     }
     localStorage.setItem("links", JSON.stringify(names));
  }

And finally on the main page, use something like a timer to keep track of the opened links.

  setInterval(function(){
     var openedLinks = JSON.parse(localStorage.getItem("links"));
     $("#someDiv").html(openedLinks.join(","));
  },1000);

Hope this works for you. The code is not tested and may have errors.

Upvotes: 2

Related Questions