HTML Location assign() मेथड: नया दस्तावेज़ लोड करें (इतिहास संरक्षित)

HTML Location assign() मेथड एक नया दस्तावेज़ लोड करता है वर्तमान दस्तावेज़ के इतिहास को संरक्षित रखते हुए। उपयोगकर्ता "वापस" बटन का उपयोग करके पिछले पेज पर लौट सकता है। यह location.href = ... या location.replace() (जो इतिहास प्रविष्टि को बदल देता है) से अलग है।

सिंटैक्स (Syntax)

location.assign(URL)

पैरामीटर: लोड करने के लिए पूर्ण या सापेक्ष URL स्ट्रिंग।

उदाहरण (Example)

यह उदाहरण assign() का उपयोग करके ट्यूटोरियल्सपॉइंट लोड करता है, जिससे उपयोगकर्ता वापस जा सकता है।

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      color: #000;
      height: 100vh;
      background: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%) no-repeat;
      text-align: center;
      font-family: Arial, sans-serif;
    }
    .btn {
      background: #db133a;
      border: none;
      height: 2.5rem;
      border-radius: 20px;
      width: 330px;
      display: block;
      color: #fff;
      outline: none;
      cursor: pointer;
      margin: 1.5rem auto;
      font-size: 1rem;
      transition: background 0.3s;
    }
    .btn:hover { background: #b01030; }
    .btn.secondary { background: #2274A5; width: 45%; display: inline-block; margin: 0.5rem; }
    .btn.secondary:hover { background: #1a5d85; }
    .info-box {
      background: rgba(255,255,255,0.1);
      color: #fff;
      padding: 1.5rem;
      border-radius: 10px;
      margin: 1rem auto;
      max-width: 500px;
      text-align: left;
      line-height: 1.8;
    }
    code { background: rgba(0,0,0,0.3); padding: 0.2rem 0.5rem; border-radius: 4px; }
    .nav-buttons { margin: 2rem 0; }
  </style>
</head>
<body>
  <h1>HTML Location assign() मेथड डेमो</h1>
  
  <div class="info-box">
    <h3>📍 वर्तमान पेज:</h3>
    <p></p>
    <h3>📜 इतिहास लंबाई: <span id="historyLen"></span></h3>
    <p><small>assign() के बाद इतिहास लंबाई बढ़ेगी। "वापस" बटन काम करेगा।</small></p>
  </div>
  
  <button class="btn" onclick="loadTutorialspoint()">ट्यूटोरियल्सपॉइंट लोड करें (assign)</button>
  
  <div class="nav-buttons">
    <button class="btn secondary" onclick="goBack()" disabled id="backBtn">← वापस</button>
    <button class="btn secondary" onclick="goForward()" disabled id="forwardBtn">आगे →</button>
  </div>
  
  <button class="btn secondary" onclick="showLocationProps()">Location प्रॉपर्टीज दिखाएं</button>
  
  <div class="info-box" id="propsDisplay" style="display: none;"></div>

  <script>
    const currentUrlEl = document.getElementById('currentUrl');
    const historyLenEl = document.getElementById('historyLen');
    const backBtn = document.getElementById('backBtn');
    const forwardBtn = document.getElementById('forwardBtn');
    const propsDisplay = document.getElementById('propsDisplay');
    
    function updateInfo() {
      currentUrlEl.textContent = window.location.href;
      historyLenEl.textContent = history.length;
      backBtn.disabled = history.length <= 1;
      forwardBtn.disabled = true; // सरलीकरण
    }
    
    function loadTutorialspoint() {
      // assign() इतिहास में नई प्रविष्टि जोड़ता है
      location.assign('https://www.tutorialspoint.com/');
    }
    
    function goBack() {
      history.back();
      setTimeout(updateInfo, 100);
    }
    
    function goForward() {
      history.forward();
      setTimeout(updateInfo, 100);
    }
    
    function showLocationProps() {
      const props = [
        'href', 'protocol', 'host', 'hostname', 'port',
        'pathname', 'search', 'hash', 'origin'
      ];
      
      let html = '
Location ऑब्जेक्ट प्रॉपर्टीज:
';
      props.forEach(prop => {
        html += `
${prop}: ${location[prop] || '(खाली)'}
`;
      });
      html += '
';
      
      html += '
मेथड्स:
';
      ['assign()', 'replace()', 'reload()', 'toString()'].forEach(m => {
        html += `
location.${m}
`;
      });
      html += '
';
      
      propsDisplay.innerHTML = html;
      propsDisplay.style.display = 'block';
    }
    
    updateInfo();
  </script>
</body>
</html>

// उपयोगकर्ता वापस जा सकता है
location.assign('/dashboard');
// या
location.href = '/dashboard';

// लॉगिन पेज पर वापस जाने से रोकें
if (loginSuccess) {
  location.replace('/dashboard');
}

// बिना रीलोड URL बदलें
history.pushState({page: 'profile'}, '', '/profile');

function navigateSafely(url, replace = false) {
  if (replace) {
    location.replace(url);
  } else {
    location.assign(url);
  }
}

// उपयोग
navigateSafely('/settings');           // सामान्य
navigateSafely('/logout', true);       // लॉगआउट के बाद वापस न जाने दें