Установка location.hash в кадрах - PullRequest
Новая
       15

Установка location.hash в кадрах

6 голосов
/ 13 марта 2009

Я использую ajax для обновления местоположения страницы во фрейме. Но при установке местоположения хеша (в частности, в Chrome и некоторых версиях IE (5.5), но иногда в IE7) страница перезагружается.

Следующий html демонстрирует проблему.

основной кадр .... frame.html это 

<html><head>
<frameset rows="*">
<frame src=sethash.html frameborder=0 scrolling=auto name=somebody>
</frameset>
</head></html>

страница sethash.html: 

<html><head>
<script language=JavaScript>
var Count = 0;
function sethash()
{  
  top.document.location.hash = "hash" + Count;  
  Count++;
}
</script>
</head>
<body onload="alert('loaded')">
<h1>Hello</h1>
<input type='button' onClick='sethash()' value='Set Hash'>
</body>
</html>`

В большинстве браузеров, загружающих frame.html, будет отображаться загруженное предупреждение один раз при загрузке страницы. Затем, когда нажата кнопка установки хеша, URL будет изменен, но хеш загруженного оповещения больше не будет отображаться. На хроме и некоторых версиях I.E

Microsoft сообщает, возможно, та же проблема с Internet Explorer 5.5 текст ссылки

Я не могу использовать предложенное Microsoft решение, которое состоит в том, чтобы захватить событие и не запускать его, а просто прокрутить в просмотр, поскольку я использую set top.location.hash как часть события onLoad.

Ответы [ 7 ]

6 голосов
/ 03 апреля 2009

Webkit (и, как следствие, Chrome) странно ведут себя с location.hash. Есть несколько открытых ошибок об этом, наиболее важной, вероятно, является эта: https://bugs.webkit.org/show_bug.cgi?id=24578, которая документирует вашу проблему с обновлением страницы при изменении location.hash. Похоже, что сейчас вам лучше всего скрестить пальцы и надеяться, что это быстро исправят.

Хотя я не могу воспроизвести ошибку в IE7, и вы первый человек в возрасте, который я видел, который поддерживает IE5.5, поэтому я не могу вам в этом помочь;)

3 голосов
/ 07 февраля 2012

Вы также можете использовать HTML5 history.pushState () , чтобы изменить хэш без перезагрузки страницы в Chrome. Примерно так: 

// frameset hash change function
function changeHash(win, hash) {
    if(history.pushState) {
        win.history.replaceState(null, win.document.title, '#'+hash);
    } else {
        win.location.hash = hash;
    }
}

В первом аргументе вам нужно передать верхнее окно frameset.

2 голосов
/ 05 апреля 2011

для chrome и safari, вам нужно использовать window.location.href, чтобы хеш работал, а не window.location.hash

см. Код ниже 

function loadHash(varHash)
{
  if(varHash != undefined) {
    var strBrowser = navigator.userAgent.toLowerCase();

    if (strBrowser.indexOf('chrome') > 0 || strBrowser.indexOf('safari') > 0) {
        this.location.href = "#" + varHash;
    }
    else {
        this.window.location.hash = "#" + varHash;
    }
  }
}
2 голосов
/ 31 января 2010

У меня тоже была эта проблема. Моя ситуация позволила мне создать событие отмены привязки окна, которое установило бы хэш со значением, которое я тоже хотел, в качестве браузера пользователя на следующую страницу или обновил. Это сработало для меня, но не уверен, что это сработает для вас.

С помощью jquery я сделал: 

if($.browser.webkit){
    $(window).unload(function() {
        top.window.location.hash = hash_value;
    });
}else{
    top.window.location.hash = hash_value;
}

Технически вам не нужно выполнять проверку webkit, но я подумал, что для людей, которые используют firefox, было бы неплохо увидеть правильное значение хеша, прежде чем они обновят набор фреймов.

-Jacob

1 голос
/ 27 мая 2011

У меня есть обходной путь, и он включает полностраничную таблицу со встроенными фреймами. Я заменил свой набор фреймов таблицей, которая занимает 100% высоты и 100% ширины и имеет два ряда. Затем в каждую из ячеек таблицы я помещаю iframe, который занимает 100% высоты и ширины для каждой ячейки. Это, по сути, имитирует набор фреймов, не будучи набором фреймов. Лучше всего, без перезагрузки при изменении хэша!

Вот мой старый код: 

<html>
<head>
<title>Title</title>
</head>
<frameset rows="48,*" frameborder="yes" border="1">
    <frame name="header" noresize="noresize" scrolling="no" src="http://header" target="_top">
    <frame name="main" src="http://body" target="_top">
    <noframes>
    <body>
    <p>This page uses frames, but your browser doesn&#39;t support them.</p>
    </body>
    </noframes>
</frameset>
</html>

... и вот мой новый код: 

<html>
<head>
<title>Title</title>
<style type="text/css">
body { margin: 0px; padding: 0px; border: none; height: 100%; }
table { height:100%; width:100% }
td { padding: 0px; margin: 0px; border: none; }
td.header { height: 48px; background-color: black; }
td.body { background-color: silver; }
iframe.header { border: none; width: 100%; height: 100%; }
iframe.body { border: none; width: 100%; height: 100%; }
</style>
</head>
<body>
<table cellpadding="0" cellspacing="0">
  <tr><td class="header"><iframe class="header" src="http://header" target="_top" scrolling="no"></iframe></td></tr>
  <tr><td class="body"><iframe class="body" src="http://body" scrolling="no"></iframe></td></tr>
</table>
</body>
</html>

Надеюсь, это поможет.

0 голосов
/ 29 апреля 2009

Как насчет location.href = '#yourhash'; Может быть, это обходит ошибку.

0 голосов
/ 04 апреля 2009

Вы пробовали создавать скрытые ссылки на хэши и запускать клики даже на них?

...