Complete Guide to Getting Current URL with JavaScript: From Basics to Advanced Applications

Basic Methods for Getting Current URL in JavaScript

In web development, retrieving the complete URL of the current page is a common requirement. JavaScript offers multiple approaches to achieve this, with window.location.href being the most reliable and widely supported method. When a page loads, developers can access this property to obtain the full URL string and store it as a variable for subsequent use.

In-Depth Analysis of the Location Object

window.location returns a Location object that contains information about the current page's URL. Besides the href property, the Location object provides other useful properties to access different parts of the URL:

// Get the complete URL
const currentUrl = window.location.href;

// Access various components of the URL
const protocol = window.location.protocol; // Protocol (e.g., "https:")
const host = window.location.host; // Hostname and port
const hostname = window.location.hostname; // Hostname
const port = window.location.port; // Port number
const pathname = window.location.pathname; // Path section
const search = window.location.search; // Query string
const hash = window.location.hash; // Anchor part
const origin = window.location.origin; // Protocol + hostname + port

Comparison and Analysis of Alternative Methods

Although document.URL can also be used to obtain the current URL, it may have compatibility issues in certain browsers like Firefox. In contrast, window.location.href offers better cross-browser compatibility and is a more reliable choice. In practical development, it is recommended to always use window.location.href to ensure code stability.

Advanced Techniques for URL Parsing and Processing

After obtaining the URL, it often needs to be parsed and processed. The various properties of the Location object make URL parsing straightforward:

// Example: Parsing different parts of the URL
function parseCurrentUrl() {
    return {
        fullUrl: window.location.href,
        protocol: window.location.protocol,
        host: window.location.host,
        path: window.location.pathname,
        query: window.location.search,
        hash: window.location.hash
    };
}

// Usage example
const urlParts = parseCurrentUrl();
console.log('Full URL:', urlParts.fullUrl);
console.log('Path:', urlParts.path);
console.log('Query parameters:', urlParts.query);

URL Modification and Page Redirection

The Location object is not only for retrieving URL information but also for modifying URLs and implementing page navigation:

// Redirect to a new page
function redirectToNewPage(url) {
    if (window.location) {
        window.location.href = url;
    }
}

// Replace current URL (without preserving history)
function replaceCurrentUrl(url) {
    window.location.replace(url);
}

// Reload the current page
function reloadPage() {
    window.location.reload();
}

Application in Streamlit Framework

In modern web frameworks like Streamlit, obtaining the current URL requires special handling. Here are several methods to get the URL in Streamlit:

# Method 1: Using streamlit-javascript
import streamlit as st
from streamlit_javascript import st_javascript

url = st_javascript("await fetch('').then(r => window.parent.location.href)")
st.write(f"Current URL: {url}")

# Method 2: Using streamlit_js_eval package
from streamlit_js_eval import get_page_location

current_location = get_page_location()
st.write(f"Page location: {current_location}")

# Method 3: Using Streamlit internal API (not recommended for production)
import urllib.parse

def get_streamlit_base_url():
    sessions = st.runtime.get_instance()._session_mgr.list_active_sessions()
    req = st.runtime.get_instance()._session_mgr.get_active_session_info(sessions[0]).request
    joinme = (req.protocol, req.host, "", "", "", "")
    return urllib.parse.urlunparse(joinme)

Best Practices and Performance Optimization

When working with the Location object, the following best practices should be followed:

// 1. Check if Location object is available
if (typeof window !== 'undefined' && window.location) {
    // Safely use the Location object
    const currentUrl = window.location.href;
}

// 2. Avoid frequent URL modifications
// Frequent URL changes can lead to performance issues and poor user experience

// 3. Use caching optimization in Streamlit
import streamlit as st

@st.experimental_memo
def get_cached_url():
    from streamlit_js_eval import get_page_location
    return get_page_location()

# Use cached URL
cached_url = get_cached_url()

Utility Functions for Building Shareable URLs

In practical applications, there is often a need to construct shareable URLs with specific parameters. Here is a practical utility function:

from urllib.parse import quote_plus

def get_query_params_url(params_list, params_dict, **kwargs):
    """
    Construct URL query string based on parameter list and dictionary
    """
    params_dict.update(kwargs)
    filtered_params_dict = {k: v for k, v in params_dict.items() if k in params_list}
    
    def listify(o=None):
        if o is None:
            return []
        elif isinstance(o, list):
            return o
        elif isinstance(o, str):
            return [o]
        else:
            return [o]
    
    query_parts = []
    for key, values in filtered_params_dict.items():
        for value in listify(values):
            query_parts.append(f"{key}={quote_plus(str(value))}")
    
    return "?" + "&".join(query_parts)

# Usage example
url_params = {"var1": 42, "var2": "example", "var3": ["a", "b"]}
shareable_url = get_query_params_url(["var1", "var2", "var3"], url_params)
st.markdown(f"[Share link]({shareable_url})")

Error Handling and Compatibility Considerations

In actual deployment, various edge cases and compatibility issues need to be considered:

// Safe URL retrieval function
function getSafeCurrentUrl() {
    try {
        if (typeof window !== 'undefined' && window.location) {
            return window.location.href;
        }
    } catch (error) {
        console.error('Error retrieving URL:', error);
        return '';
    }
    return '';
}

// Handling blank space issues in Streamlit
import streamlit as st

def get_url_without_blank_space():
    """Avoid blank spaces caused by custom JavaScript components"""
    main_container = st.container()
    footer_container = st.container()
    
    with main_container:
        # Main page content
        st.write("Main application content")
    
    with footer_container:
        # Place URL retrieval in footer container
        from streamlit_js_eval import get_page_location
        url = get_page_location()
    
    return url

By mastering these techniques, developers can flexibly obtain and process current URLs in various scenarios, whether for simple page navigation or complex web application development. Understanding how the Location object works and following best practices is crucial for building robust web applications.