2010年6月22日 星期二

觸發 post back 固定畫面位置(二)

在 .net 2.0 開始,提供了  MaintainScrollPositionOnPostback 可供我們控制網頁 post back 後還可以回到原先瀏覽的位置。

設定方式很簡單,只要在 aspx 頁面寫下:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ScrollTest3.aspx.cs" Inherits="ScrollTest3"  MaintainScrollPositionOnPostback="true" %>

經實測,IE ok, Firefox ok,  但 Google Chrome 與 Safari 卻失敗...

為了達到放諸四海皆準的目的,不得動些手腳來完成。

首先,加入一個「瀏覽資訊檔」。並將他放到 App_Browsers 資料夾下。


點進去剛剛新建的檔案,可以看得出來他是用 xml 格式定義了各種不同瀏覽器的設定。而我們需要將目前未定義的瀏覽器,手動新增進去。所以,複製以下內容,貼到 <browsers></browsers>裡。


<browser id="Safari3" parentID="Safari1Plus">
    <identification>
      <userAgent match="Safari/\d+\.\d+" />
    </identification>
    <capture>
      <userAgent match="Version/(?'version'\d+\.\d+)" />
    </capture>
    <capabilities>
      <capability name="browser" value="Safari3" />
      <capability name="version" value="${version}" />
    </capabilities>
    <controlAdapters>
      <adapter controlType="System.Web.UI.WebControls.Menu"
               adapterType="" />
    </controlAdapters>
  </browser>
  <browser id="GoogleChrome" parentID="Safari3">
    <identification>
      <userAgent match="Chrome/(?'version'\d+\.\d+)" />
    </identification>
    <capabilities>
      <capability name="browser" value="Googlebot" />
      <capability name="supportsMaintainScrollPositionOnPostback" value="true" />
    </capabilities>
  </browser> 

修改後在 chrome 重新執行,就可以正常返回原先的位置了。

如果你懶的每一頁都去設定,可以直接在 web.config 的 <system.web></system.web> 加上 <pages maintainScrollPositionOnPostBack="true"></pages>

參考資料:
01. 最简单的方法,让 ASP.NET Menu 控件在 Google Chrome 浏览器上正常显示
02. 讓Chrome瀏覽器支援MaintainScrollPositionOnPostback屬性
03. postback 後,網頁如何 keep 在相同位置
04. 觸發 post back 固定畫面位置
05. 網頁PostBack後回到原來停留的位置

沒有留言:

張貼留言