2009-03-13 10 views
6

私はajaxを使ってフレーム内のページの位置を更新しています。しかし、ハッシュの場所を設定すると(Chromeや一部のバージョンのIE(5.5)、特にIE7で)、ページがリロードされています。フレーム内に位置のハッシュを設定する

次のhtmlはこの問題を示しています。

メインフレーム.... frame.htmlはsethash.htmlページである

<html><head> 
<frameset rows="*"> 
<frame src=sethash.html frameborder=0 scrolling=auto name=somebody> 
</frameset> 
</head></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は変更されますが、ロードされたアラートは再び表示されません。 ChromeとIE

マイクロソフトのレポートの一部のバージョン私はマイクロソフトそれを発射イベントをキャプチャしないことです示唆したソリューション、が、ちょうどスクロールを使用することはできませんInternet Explorer 5.5のlink text

と、おそらく同じ問題でonLoadイベントの一部としてtop.location.hashを使用しているように、ビューに追加します。

答えて

6

Webkit(および拡張子はChrome)は、location.hashを使用して変な動作をします。開いているバグがいくつかありますが、最も関連性が高いのはおそらくこれです。https://bugs.webkit.org/show_bug.cgi?id=24578は、location.hashが変更されたときにページが更新されるという問題を文書化しています。あなたの最善の選択肢は今すぐあなたの指を渡り、それが即座に修正されることを期待することです。私もIE7でバグを再現することはできません、あなたはIE5.5ので、私は実際にそこにあなたを助けることができないサポートし、私が見てきた年齢の最初の人だ

;)

0

はあなたを持っていますハッシュへの隠されたリンクを作成し、クリックしてもそれらを試してみましたか?

0

どうすればいいですかlocation.href = '#yourhash';おそらくバグを回避します。

2

私もこの問題を抱えていました。私の状況では、ユーザーのブラウザとして次のページに移動したい、または更新した値でハッシュ値を設定するウィンドウアンバインドイベントを作成することができました。これは私のために働いたが、それがあなたのために働くかどうかは分からない。 jQueryを使って

、私がやった:あなたはWebKitのチェックを行う必要はありませんが、私はFirefoxを使用して人々のために考え

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

技術的には、彼らの前に、正しいハッシュ値を確認するためにもいいかもしれませんフレームセットをリフレッシュします。

クロムとサファリのため

-Jacob

2

、あなたは

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; 
    } 
    } 
} 
1

以下のコードを参照してくださいwindow.location.hashのではなく、作業のハッシュを取得するためにwindow.location.hrefを使用する必要があります回避策があり、iframeが埋め込まれたフルページの表が必要です。 100%の高さと100%の幅を持ち、2つの行を持つテーブルでフレームセットを置き換えました。次に、各テーブルセルで、各セルの高さと幅を100%とするiframeを配置します。これは基本的に、フレームセットを持たずにフレームセットを模倣しています。何よりも、ハッシュ変更のリロードはありません!

は、ここに私の古いコードです:

<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> 

は、この情報がお役に立てば幸いです。

3

また、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; 
    } 
} 

+0

これは機能します。小さなメモ:[Chromeはfaviconでちらつきを表示し、再生/停止ボタンを押す](http://code.google.com/p/chromium/issues/detail?id=50298)。これは一見醜い。 – Blaise

関連する問題