如何使用 JavaScript 返回共享按钮的当前 URL？

在这篇文章中，我们将学习网站上显示的分享按钮背后的逻辑，这些按钮可用于在其他社交媒体平台上分享帖子或网站的完整 URL。我们将通过几个步骤来理解这一点。

第 1 步：首先，我们需要创建一个 HTML 文件，该文件将在浏览器上显示所有内容。

html

  

    
        /* This CSS is optional */
        #share-button {
            padding: 10px;
            font-size: 24px;
        }
    
 
  

        
    Share
      
    
    
    
    
      
    
    
    
        // We will write the javascript code here
        

    

输出：

HTML 代码的结果。

以上是 HTML 代码，从这里开始我们将只编写 JavaScript 部分。

第 2 步：在这一步中，我们将添加 JavaScript 代码，该代码将显示当前网页的 URL 作为链接。

• 这里的“ window ”是一个全局对象，它由各种属性组成，其中 location 是一个这样的属性，href 属性为我们提供了完整的 URL 以及所使用的路径和协议。
• 但是我们不需要“https://”（协议），所以我们使用 JavaScript 的 slice 方法将其删除。

HTML

  

    
        /* This CSS is optional */
        #share-button {
            padding: 10px;
            font-size: 24px;
        }
    
 
  

        
    Share
      
    
    
    
    
  
    
    
    
        // Make sure you write this code inside the 
        // script tag of your HTML file 
  
        // Storing the URL of the current webpage
        const URL = window.location.href.slice(7);
        // We used the slice method to remove 
        // the 'http://' from the prefix 
  
        // Displaying the current webpage link
        // on the browser window 
        const link = document.querySelector('a');
        link.textContent = URL;
        link.href = URL;
  
        // Displaying in the console
        console.log(URL);
        

    

输出：

步骤的结果：2

第 3 步：我们不希望在浏览器窗口加载时立即显示 URL，而是希望在单击按钮时显示它。所以我们会给按钮添加一个事件监听器，然后在按钮被点击时显示URL

HTML

  

    
        /* This CSS is optional */
        #share-button {
            padding: 10px;
            font-size: 24px;
        }
    
 
  

        
    Share
      
    
    
    
    
  
    
    
    
        // Make sure you write this code inside the 
        // script tag of your HTML file 
  
        // Storing the URL of the current webpage
        const URL = window.location.href.slice(7);
        // We used the slice method to remove 
        // the 'http://' from the prefix 
  
        // Displaying the current webpage link
        // on the browser window 
        const link = document.querySelector('a');
        const button = document.querySelector('#share-button');
  
        // Adding a mouse click event listener to the button
        button.addEventListener('click', () => {
            // Displaying the current webpage link
            // on the browser window 
            link.textContent = URL;
            link.href = URL;
              
            // Displaying in the console
            console.log(URL);
        });
        

    

输出：

步骤4：现在点击按钮时显示链接，但我们不需要当前页面的链接，而是在社交媒体平台上共享当前网页的链接。所以我们更新代码如下。

HTML

  

    
        /* This CSS is optional */
        #share-button {
            padding: 10px;
            font-size: 24px;
        }
    
 
  

        
    Share
      
    
    
    
    
  
    
    
    
        // Make sure you write this code inside the 
        // script tag of your HTML file 
  
        // Facebook share url
        const fbShare = "https://www.facebook.com/sharer/sharer.php?u="
  
        // Storing the URL of the current webpage
        const URL = window.location.href.slice(7);
        // We used the slice method to remove 
        // the 'http://' from the prefix 
  
        // Displaying the current webpage link
        // on the browser window 
        const link = document.querySelector('a');
        const button = document.querySelector('#share-button');
  
        // Adding a mouse click event listener to the button
        button.addEventListener('click', () => {
            // Displaying the current webpage link
            // on the browser window 
            link.textContent = fbShare+URL;
            link.href = fbShare+URL;
      
            // Displaying in the console
            console.log(fbShare+URL);
        });
        

    

输出：

这就是我们获取共享 URL 的方式，而不是显示共享 URL，我们实际上可以在按钮中使用它来直接将用户重定向到特定的社交媒体平台。此外，我使用了 Facebook 共享 URL，几乎所有社交媒体平台都提供类似的 URL，您可以随意尝试它们并想出您自己的共享按钮。这篇文章涵盖了有关使用 JavaScript 共享当前网页 URL 的所有要点。