pageload 事件

实例

在外部页面成功加载及插入到DOM中后弹出信息：

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

定义和用法

pageload 事件在页面成功加载及插入到DOM后触发。

pagebeforeload	在任何加载之前触发的事件
pageloadfailed	在页面加载失败后触发。

语法

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

参数 function(event,data)

pageload 事件触发后指定执行的函数该函数含有以下两个参数：

事件对象

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

数据对象

包含以下类型:

url (string)	通过回调传到$.mobile.loadPage()的绝对或者相对地址
absUrl (string)	包含URL的绝对引用
dataUrl (string)	包含浏览器的URL 位置
options (object)	包含可选项发送到 $.mobile.loadPage()
xhr (object)	包含 XMLHttpRequest 对象 (作为第三个参数发送到 $.ajax() 成功回调)
textStatus (string 或者 null)	包含请求状态 ("success" 或 "null") (作为第二个参数发送到 $.ajax() 失败回调)

更多实例

相关事件演示。

<!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>
<link rel="stylesheet" href="//apps.bdimg.com/libs/jquerymobile/1.4.2/jquery.mobile.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.2/jquery.mobile.min.js"></script>
<script>
$(document).on("pageload",function(event){
  alert("The " + event.type + " event was triggered");
});
</script>
</head>
<body>

<div data-role="page">
  <div data-role="header">
    <h1>Header Text</h1>
  </div>

  <div data-role="content">
    <a href="externalpage.html">External page</a>
  </div>

  <div data-role="footer">
    <h1>Footer Text</h1>
  </div>
</div> 

</body>
</html>

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

数据对象

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="//apps.bdimg.com/libs/jquerymobile/1.4.2/jquery.mobile.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.2/jquery.mobile.min.js"></script>
<script>
$(document).on("pageload",function(event,data){
  alert("pageload event fired!
URL: " + data.url);
});
</script>
</head>
<body>

<div data-role="page">
  <div data-role="header">
    <h1>Header Text</h1>
  </div>

  <div data-role="content">
    <a href="externalpage.html">External page</a>
  </div>

  <div data-role="footer">
    <h1>Footer Text</h1>
  </div>
</div> 

</body>
</html>

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

pageload 事件

pageload 事件

实例

定义和用法

语法

参数 function(event,data)

事件对象

数据对象

更多实例

相关事件演示。

事件对象

数据对象

选择支付方式：