Проблемы с window.location.hash

#javascript #css #html

#javascript #css #HTML

Вопрос:

У меня на моем сайте есть это поле содержимого, которое имеет разные вкладки сбоку, и когда вы нажимаете на одну из вкладок, оно использует JS для скрытия / отображения соответствующих разделов внутри поля содержимого.

У меня также есть это в голове, чтобы дать каждому div внутри поля содержимого свой собственный URL:

 <script type="text/javascript">
  function loadSmugInfo() {
    if(window.location.hash == '#smuginfo')
      document.getElementById('contentInfo').style.display = "block";
      document.getElementById('contentSlideshow').style.display = "none"
  }
</script>

<script type="text/javascript">
  function loadFind() {
    if(window.location.hash == '#find')
      document.getElementById('contentMap').style.display = "block";
      document.getElementById('contentSlideshow').style.display = "none"
  }
</script>

<script type="text/javascript">
  function loadSmugmug() {
    if(window.location.hash == '#smugmug')
      document.getElementById('contentSmugInfo').style.display = "block";
      document.getElementById('contentSlideshow').style.display = "none"
  }
</script>

<script type="text/javascript">
  function loadMain() {
    if(window.location.hash == '#')
      document.getElementById('contentSlideshow').style.display = "block"
  }
</script>

<script type="text/javascript">
  function loadSlideshow() {
    if(window.location.hash == '#slideshow')
      document.getElementById('contentSlideshow').style.display = "block"
  }
</script>
  

У меня также есть это, поэтому, когда вы нажимаете вкладку, она изменяет хэш.

Вот моя проблема. Когда страница загружается как обычно (без хэша), первый и самый верхний div по-прежнему не отображается (хотя в CSS для него установлено значение display: block).

Я загружаю функции, которые вы видите выше, используя onLoad для изображения над полем содержимого.

Буду признателен за любую помощь, у меня немного плотный график. Дайте мне знать, если вам понадобится дополнительная информация. Спасибо!

Комментарии:

1. Побочный вопрос: почему вы используете отдельные <script> теги для каждой функции?

2. Трудно сказать, что такое «первый» div без html.

3. @MattBall — Потому что я довольно новичок в JS и не уловил этого. Спасибо

4. @mrtsherman — Я могу сказать вам, что первый div — это ‘contentSlideshow’, или вам все еще нужно, чтобы я поместил сюда весь HTML?

Ответ №1:

Если вы делаете то, что, как я понял, вы делаете, вам придется использовать

 if( (window.location.hash == '#') || (window.location.hash == '')
  

вместо

 if(window.location.hash == '#')
  

поскольку хэш пуст при загрузке скрипта.

На заметку:

Для всего этого вам нужна только одна функция:

 function whatever()
{
    if(window.location.hash == '#smuginfo')
    {
        case1
    }
    else if(window.location.hash == '#find')
    {
        case2
    }
    .
    .
    .
    else
    {
        default for no hash
    }
}
  

Это было бы короче с switch помощью инструкции…

Ответ №2:

Здесь есть пара проблем.

Во-первых, вы не показываете никакого способа вызова этих функций. Возможно, вы захотите запустить интервальный таймер для опроса этих функций и периодически проверять их. Это гарантирует, что они будут оцениваться при загрузке страницы и каждом изменении хэша.

Вы также оцениваете, будет ли хэш == «#», который используется по умолчанию, но не будет отображаться при начальной загрузке страницы. Может быть, поставить условие И, чтобы проверить, хорошо ли это == «».

Вот пример некоторого кода, который я использую для опроса хэша. Может быть, это может помочь.

 var start_hash = window.location.hash;
var recent_hash = ''; 

process_hash(start_hash);        // Start the initial hash check
setInterval(poll_hash, 100);    // Initialize our hash polling interval

function poll_hash() {
 if (window.location.hash==recent_hash) { return; } // No change in URL hash
 recent_hash = window.location.hash;                // Set to check next time. 
 process_hash(recent_hash);                         // Changed hash, lets process
}

function process_hash(current_hash) {
 // Check for defaults, then set to #home.
 if(!current_hash || current_hash == '' || current_hash == '#') 
  { current_hash='#home'; }

 // Strip the # for the hash
 var hash_id = current_hash.match(/[^#] /g);                

 if(hash_id == 'home') { do something; }
}
  

Ответ №3:

Попробуйте это:

 <script> 

    document.domain = 'facebook.com'; 
    try { 
      try {
         if (window.opener amp;amp; window.opener.graphexplorer) {    
            window.opener.graphexplorer.authCallback(window.location.hash); 
         }
      } catch(e) { } 
    } catch (e) { }
    window.location.hash = ''; 
    window.close(); 

</script>