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發出的請求能解析正確的頁面.


相關推薦

使用 JQueryMobile 連結提示error loading page錯誤

使用jquery mobile建立dialog時出現載入錯誤,“Error Loading Page”。 原因是:jquery mobile頁面預設採用ajax方式進行互動,而ajax方式下是不支援f://的,也就是本地檔案,所以有兩種解決辦法: 1.給超連結增加data-

前後臺互動實現連結通過指定的 url 去網路或者檔案伺服器下載檔案

前臺 VUE 介面: <el-table-column prop="attachment" align="center" label="附件詳情"> <template slot-scope="scope"> <!--<el-button @

連結第一次能傳送請求,第二次卻不能傳送請求

1、點選超連結並彈出modal(模態框) 問題:第一次傳送請求並得到響應成功,但是重新點選原來或其他超連結均不能把請求提交到後臺。均彈出同上modal。 原因:<div class="modal fade" id="photoInfoModal" rol

a標籤連結 javascript:void(0),連結不跳轉,不響應

讓超連結點選後不跳轉,可以用href = "#",但是這個#就會錨點到頁面最上邊     點選連結後不跳轉可以設定成     1.<a href="javascript:void(0);" >javascript:void(0);</a>     2

MFC C++監聽網頁視窗的連結跳轉問題(即開啟新的瀏覽器視窗)

使用MFC的CHtmlView類,註冊ON_EVENT事件進行監聽。 實現的基本程式碼是: BEGIN_EVENTSINK_MAP(CxxxView, CHtmlView)ON_EVENT(CxxxView, AFX_IDW_PANE_FIRST, DISPID_NEWWI

【潤乾v5】實現連結,隱藏對應行功能

我們需要實現點選下圖中超連結1,隱藏第一行,顯示第二行;點選超連結2,隱藏第二行,顯示第一行。 製作思路: 設定引數arg1,當arg1==1時,第一行顯示,第二行隱藏;當arg==0時,第一行隱藏,第二行顯示。 超連結1傳遞arg1=0到本報表,超連結2傳遞arg1=1

如何使連結後瀏覽器彈出下載框

如果下載的資源和伺服器是同域的,那麼只要在a標籤中新增download屬性即可。 <a href="http://127.0.0.1:8000/a.jpg" download="a.jpg"

ie瀏覽器連結或按鈕沒反應怎麼辦

用IE瀏覽網頁的時候經常會碰到這種情況,點選一個超連結時沒有任何反應,甚至連QQ或淘寶的mini彈窗上的連結都不能點選、右鍵選單中選擇“在新視窗開啟”問題如故,重新整理或重灌IE仍然不能解決問題,此時到底該如何修復此問題呢?  工具/原料  Windows OS  IE  3

微信掃一掃下載連結彈出遮罩提示使用者在外部瀏覽器中開啟

使用微信開啟網址時,無法在微信內開啟常用下載軟體,手機APP等。網上流傳的各種微信開啟下載連結,微信已更新基本失效,最新的一個是使用連結跳轉方式: http://mp.weixin.qq.com/mp/redirect?url=http://caibaojian.com/test.apk#wei

jquery mobile href連結 單擊顯示error loading page

在a標籤裡新增 data-ajax="false" 或 rel="external" 屬性 例:<a data-ajax="false" href="http://www.***.com/help/***.zip">點選下載</a> 詳解

彈窗提示,3秒後關閉視窗並跳轉新的頁面

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="

vue禁用與啟用以及彈出提示

一·,     HTML <tr v-for="(item,index) in showData" :key="index"> <td>{{item.developer_id}}</td&

外部連結跳轉App指定頁面SingleTask模式

1.上一篇講到如何點選外部連結跳轉app的方法,經過測試,當開啟App的時候,點選連結時候會重新開啟一個新的App程序,如果你想從原來的開啟APP跳進去,那麼使用SingleTask模式配合android:taskAffinity屬性一起使用.    如果單獨使用Single

問題:windows---筆記本外接顯示器,在系統更新後,外接顯示器沒有反應,右鍵開啟顯示設定,檢測後提示未檢測到其他顯示器

由於系統更新後,驅動程式也更新了,所以需要重新設定驅動來解決這個問題。 1.可以下載一個驅動精靈來檢測一下是否有未升級的顯示卡驅動,重新升級後,再重新啟動系統。 2.下載好了驅動也沒有改變的話就點選快捷鍵Windows+ X 進入裝置管理器頁面 顯示介面卡的位置會有一個帶有----

如何避免Toast多次後一直提示

一直點選按鈕跳出訊息框半天不消失,使得使用者體驗極差 這時我們需要將Toast的呼叫封裝成一個介面,寫在一個公共的類當中 package com.example.administrator.myapplication; import android.content.Context

Hexo yilia 所有文章提示缺失模組

問題 點選所有文章提示缺失模組 解決辦法 確保node版本大於6.2 在部落格根目錄(注意不是yilia根目錄)執行以下命令:npm install hexo-generator-json-content --save 在hexo的blog根目錄_config

下載連結彈出空白頁面

分為兩種情況 如果下載由js觸發而非a標籤,則可以在彈出的頁面中進行如下修改: <head>與</head>之間加入: <base target="tempiframe" />  在<body>&l

圖示/連結發起QQ臨時會話

有時候,我們需要實現在網頁上點選一個QQ圖示來實現QQ臨時會話,這樣不用新增好友,也能滿足及時溝通的需求。 實現方案比較簡單,只是為a標籤修改href屬性,程式碼如下 <a href="http://wpa.qq.com/msgrd?v=3&amp;uin=你要輸入的QQ

批量登入qq空間,推廣連結,增加

原始碼請至此處下載:https://github.com/inmyjs/apqq_space 或者直接下載打包好的,https://download.csdn.net/download/kunoy/10652361 ,下載解壓,點選start.exe啟動。 此軟體適合在qq

C#中的webBrowser控制元件,如何讓它所有連結都是在當前視窗開啟

private void webBrowser1_DocumentCompleted(object sender, WebBrowserDocumentCompletedEventArgs e) { //將所有的連結的目標,指向本窗體 foreach (HtmlEl