1. 程式人生 > >使用 JQueryMobile 點選超連結提示“error loading page” 錯誤

使用 JQueryMobile 點選超連結提示“error loading page” 錯誤

使用jquery mobile建立dialog時出現載入錯誤,“Error Loading Page”。

原因是:jquery mobile頁面預設採用ajax方式進行互動,而ajax方式下是不支援f://的,也就是本地檔案,所以有兩種解決辦法:

1.給超連結增加data-ajax="false"屬性或者加上 rel="external"就好了,以此來禁用ajax.

<a href="html/main.html" data-role="button" <a href="html/main.html" data-role="button"data-ajax="false"  >進入主頁面</a>

2.將跳轉頁面釋出到伺服器

對於其他的幾種跳轉,看下文。現在我們來了解一下各種連線各種跳轉的本質

外部頁面連結

JQuery Mobile 自動化了建立ajax站點和程式的過程.

預設情況下,當你點選一個連結時會指向一個外部頁面(如.products.html), 但是框架會解析該連結的 href屬性然後發出一個ajax請求(Hijax)並顯示正在載入的提示.

如果ajax請求成功,新頁面內容會新增到DOM當中,所有mobile widget都是自動初始化的,然後新頁面會動畫過渡顯示出來.

如果ajax請求失敗,框架會顯示一個小小的錯誤訊息提示('e'調板的樣式),並會在一小段時間內消失, 並且不會破壞當前的導航流(譯註:即頁面不會重新整理也不會對前進後退按鈕有影響)

內部頁面連結

單個HTML文件可以包含多個'page',只需要在一個頁面包含 多個data-role="page"的div即可,每個pagediv必須由一個唯一的ID (id="foo") ,而連結到相應頁面使用錨記即可(href="#foo").當點選一個連結時, 框架會尋找id為錨記href的內部'page'並顯示到當前介面中.

要注意如果你正在通過ajax從一個mobile頁面連結到一個含有多個內部頁面的頁面,你需要為該連結新增一個 rel="external" 或者 data-ajax="false" . 該屬性告知框架對頁面進行重新載入 ,url hash也將清零.這點十分關鍵,因為ajax 頁面使用 hash(#)來追蹤ajax歷史,當含有多個內部page的頁面使用hash 來指示內部page時會發生衝突.

舉例來說,一個指向含有多個內部page的頁面的連結會像這樣:

<a href="multipage.html" rel="external">Multi-page link</a>

這兒有個2 'page'頁面的例子,由兩個jQuery Mobile div構建,每個div由其ID來導航,要注意 這些page上的ID只需要支援內部的頁面連結,如果每個頁面是分離的HTML文件,這些ID則是可選的. 以下是兩個page,在body 元素裡面.

<body>
	<!-- Start of first page -->
	<div data-role="page" id="foo">
		<div data-role="header">
			<h1>Foo</h1>
		</div>
		<!-- /header -->
		<div data-role="content">
			<p>I'm first in the source order so I'm shown as the page.</p>
			<p>
				View internal page called <a href="#bar">bar</a>
			</p>
		</div>
		<!-- /content -->
		<div data-role="footer">
			<h4>Page Footer</h4>
		</div>
		<!-- /header -->
	</div>
	<!-- /page -->
	<!-- Start of second page -->
	<div data-role="page" id="bar">
		<div data-role="header">
			<h1>Bar</h1>
		</div>
		<!-- /header -->
		<div data-role="content">
			<p>I'm first in the source order so I'm shown as the page.</p>
			<p>
				<a href="#foo">Back to foo</a>
			</p>
		</div>
		<!-- /content -->
		<div data-role="footer">
			<h4>Page Footer</h4>
		</div>
		<!-- /header -->
	</div>
	<!-- /page -->
</body>




請注意: 由於我們使用了hash來為所有ajax 'page' 追蹤歷史記錄,現目前來說, 在一個jQuery Mobile page裡還不可能把連結作為普通的錨記(index.html#foo), 因為框架會尋找一個 ID 為#foo 'page' 來跳轉,而不是像普通HTML頁面那樣滾動含有該ID的內容.

後退連結

如果你對一個a標籤使用 data-rel="back" 屬性,任何在上面的點選都會模擬後退按鈕,而忽略它的href屬性. 這點在連結回一個已命名的頁面十分有用,比如當有一個到'home'連結或者當用javascript生成一個後退按鈕時, 或者一個按鈕用來關閉一個對話方塊.當在你的原始碼使用這個特性的時候,一定要提供一個有意義的href實際指出引用頁面的URL (這會使得該特性也能在C級瀏覽器中也能起作用). 同樣,請記住如果你只是單純使用一個後退過渡而不在歷史記錄中真正後退,你可以使用 data-direction="reverse"來替代.

重定向和連結到目錄

當連結至一個目錄地址時(比如用 href="typesofcats/"來替代 href="typesofcats/index.html"), 你必須提供一個後置 斜槓.這是因為jQuery Mobile假定在url中最後一個"/" 後面的部分是一個檔名,jQuery Mobile會移除該部分,以便 在未來有頁面被引用時建立基地址.

然而,你可以通過返回已經指定了data-url屬性的page div來解決該問題. jQuery Mobile會使用該屬性的值來更新URL來替換過去請求的那個頁面. 這也允許你返回url的更改來作為重定向的結果,舉例來說,你可以提交一個表單到"/login.html",但是成功提交後返回一個 url "/account".

這個連結指向"docs-links-urltest/index.html",該連結是一個目錄裡的索引頁 : Test Link 返回的頁面會用"docs/pages/docs-links-urltest/"(包含後置斜槓)來更新hash,這是通過那個頁面的data-url的值來完成的. 謹記這個值會替換整個hash,是否替換取決於你自己,當重新整理或者深入連結時URL發出的請求能解析正確的頁面.


相關推薦

no