pagebeforeload 事件

实例

在载入请求前弹出信息:

$(document).on("pagebeforeload",function(){
  alert("pagebeforeload event fired!");
});

定义和用法

pagebeforeload 是在任何加载之前触发的事件。

pageload	在页面成功载入并插入到DOM中触发。
pageloadfailed	在页面加载失败后触发。

语法

 $("document").on("pagebeforeload",function(event,data){...})

参数

function(event,data)

必须。指定 pagebeforeload 事件触发时执行的函数。

该函数含有以下两个参数：

事件对象

包括任何jQuery事件属性 ( event.target, event.type 等) 。

数据对象

包含以下类型:

url (string)	通过回调传到$.mobile.loadPage()的绝对或者相对地址
absUrl (string)	包含URL的绝对引用
dataUrl (string)	包含浏览器的URL 位置
deferred (object)	包含 resolve() 或 reject()
options (object)	包含可选项发送到 $.mobile.loadPage()

注意：针对此事件调用preventDefault()的回调函数必须针对此事件调用 resolve()或者reject()方法，使得changePage()的请求恢复。

更多实例

相关事件演示

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="//apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="//apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script>
$(document).on("pagecontainerload",function(event,data){
  alert("pagecontainerload 事件触发!
URL: " + data.url);
});
$(document).on("pagecontainerloadfailed",function(event,data){
  alert("抱歉，被请求页面不存在。");
});
</script>
</head>
<body>

<div data-role="page">
  <div data-role="header">
    <h1>页眉文本</h1>
  </div>

  <div data-role="main" class="ui-content">
    <a href="externalpage.html">外部页面</a>
    <br><br>
    <a href="externalnotexist.html">外部页面不存在</a>
  </div>

  <div data-role="footer">
    <h1>页脚文本</h1>
  </div>
</div> 

</body>
</html>

该实例演示了pageload 和 pageloadfailed。

事件对象

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="//apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="//apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script>
$(document).on("pagebeforeload",function(event){
  alert( event.type + " 事件触发");
});
</script>
</head>
<body>

<div data-role="page">
  <div data-role="header">
    <h1>头部文本</h1>
  </div>

  <div data-role="main" class="ui-content">
    <a href="externalpage.html">外部页面</a>
  </div>

  <div data-role="footer">
    <h1>底部文本</h1>
  </div>
</div> 

</body>
</html>

使用 event.type 属性返回触发的事件类型。

数据对象

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="//apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="//apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script>
$(document).on("pagebeforeload",function(event,data){
  alert("pagebeforeload 事件触发!
URL 即将载入: " + data.url);
});
</script>
</head>
<body>

<div data-role="page">
  <div data-role="header">
    <h1>头部文本</h1>
  </div>

  <div data-role="main" class="ui-content">
    <a href="externalpage.html">外部页面</a>
  </div>

  <div data-role="footer">
    <h1>底部文本</h1>
  </div>
</div> 

</body>
</html>

使用 data.url 返回外部页面的URL。

pagebeforeload 事件

pagebeforeload 事件

实例

定义和用法

语法

参数

function(event,data)

事件对象

数据对象

更多实例

相关事件演示

事件对象

数据对象

选择支付方式：