How to share URL and copy to clipboard with URL change-CodePudding

I have a map site with URL like this(1):

https://mysite. com/map

When user zoom/move on the map the URL will change according to the zoom level and coordinates of the map, the URL will be changed to something like this(2):

https://mysite. com/map#23/119830.34234/180.2346/

My problem is when I copy URL to clipboard or share them on social network only get first URL(1) or URL when refresh website. I want to copy and share the latest URL changed when user zoom/move on the map.

This is my code for share and copy to clipboard

HTML

       <div >
            <span>Share</span>
            <nav>
                <a  href="#"></a>
                <a  href="#"></a>
                <a  href="#"></a>
                <a  href="#"></a>
            </nav>
        </div>

Copy to clipboard

var temp = $("<input>");
var url = $(location).attr('href');
$('.clipboard').on('click', function() {
  $("body").append(temp);
  temp.val(url).select();
  document.execCommand("copy");
  temp.remove();
  alert('Copied!');
})

Share to social

setShareLinks();
function socialWindow(url) {
  var left = (screen.width - 570) / 2;
  var top = (screen.height - 570) / 2;
  var params = "menubar=no,toolbar=no,status=no,width=570,height=570,top="   top   ",left="   left;
  // params = "";
  window.open(url,"NewWindow",params);
}

function setShareLinks() {
  var pageUrl = encodeURIComponent(document.URL);
  var tweet = encodeURIComponent($("meta[property='og:description']").attr("content"));

  $(".social-share.facebook").on("click", function() {
    url = "https://www.facebook.com/sharer.php?u="   pageUrl;
    socialWindow(url);
  });

  $(".social-share.twitter").on("click", function() {
    url = "https://twitter.com/intent/tweet?url="   pageUrl   "&text="   tweet;
    socialWindow(url);
  });

  $(".social-share.linkedin").on("click", function() {
    url = "https://www.linkedin.com/sharing/share-offsite/?url="   pageUrl;
    socialWindow(url);
  });
  $(".social-share.zalo").on("click", function() {
    url = "https://sp.zalo.me/plugins/sdk.js/?url="   pageUrl;
    socialWindow(url);
  });
}

CodePudding user response：

You must get the url when the user wants to copy it to the clipboard and not keep it ready on page load.

var temp = $("<input>");    
$('.clipboard').on('click', function() {
  var url = window.location.href;
  $("body").append(temp);
  temp.val(url).select();
  document.execCommand("copy");
  temp.remove();
  alert('Copied!');
});

CodePudding user response：

In addition to the answer by T.Shah, you should remove the href="#" in your HTML. This will reset the location hash when the a-tag is clicked.