mobile jquery onload函数问题

最新推荐文章于 2023-03-16 09:40:20 发布
最新推荐文章于 2023-03-16 09:40:20 发布
阅读量908 收藏
点赞数
分类专栏： 开发问题记录 文章标签： mobile-jqu
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u011453689/article/details/50359859
版权

一、mobile-jquery中body-onload函数的执行问题

   问题描述：在使用mobile-jquery框架写网页的时候，从A页面跳转到B页面的时候，B页面中body的onload函数不执行，但是在刷新一下之后能正常执行了。


问题原因和解决方式：Jquery Mobile支持所有标准的html格式，为了让体验更加流畅,Jquery Mobile会把同一个域下的所有指向页面的链接都会自动转为ajax请求，并且用动画的转场效果实现切换。指向别的域的链接或者是含有 rel="external", data-ajax="false" 属性的链接以及含有target属性的链接不会通过ajax加载，页面会整体被刷新。

   这个问题困扰了我一个下午，开始我以为是js函数的问题，但是我用一个只有alert语句的函数去测试还是没有用。网上说的改变js函数放置位置的方法我也试了，没用。后来我用其他页面进行测试的时候发现没有引入mobile-jquery框架的普通html页面可以很正常的实现跳转和onload函数。于是我猜想这个mobile-jquery的onload函数可能和普通的html页面不一样。于是我上网搜了半天的mobile-jquery页面跳转的问题，终于找到一篇博文解决了这个问题(http://www.cnblogs.com/shenbin/archive/2013/03/19/2969610.html) 。

    我解决了问题简直是兴奋，必须写一篇博文来纪念一下。

这个问题如下

    这是两个使用了mobile-jquery框架的页面，从页面A跳转到页面B的时候，页面B的onload函数不执行。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>页面A</title>
    <link rel="shortcut icon" href="../jq/demos/favicon.ico">
    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,700">
    <link rel="stylesheet" href="../jq/demos/css/themes/default/jquery.mobile-1.4.5.min.css">
    <link rel="stylesheet" href="../jq/demos/_assets/css/jqm-demos.css">
    <link rel="stylesheet" href="mycss.css">
    <script src="../jq/demos/js/jquery.js"></script>
    <script src="../jq/demos/_assets/js/index.js"></script>
    <script src="../jq/demos/js/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
    <div data-role="page" id="pageone">
        <div data-role="content" >
            <a href="test2.html" data-ajax="false">点击我可以跳转到页面B</a>
        </div>
    </div>
</body>
</html>
    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>页面B</title>
    <link rel="shortcut icon" href="../jq/demos/favicon.ico">
    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,700">
    <link rel="stylesheet" href="../jq/demos/css/themes/default/jquery.mobile-1.4.5.min.css">
    <link rel="stylesheet" href="../jq/demos/_assets/css/jqm-demos.css">
    <link rel="stylesheet" href="mycss.css">
    <script src="../jq/demos/js/jquery.js"></script>
    <script src="../jq/demos/_assets/js/index.js"></script>
    <script src="../jq/demos/js/jquery.mobile-1.4.5.min.js"></script>
</head>
<body onload="onLoad()">
    <div data-role="page" id="pageone">
        <div data-role="content" >
            <a>我是页面B</a>
        </div>
    </div>
</body>
<script type="text/javascript">
    function onLoad(){
        alert("test");
    }
</script>
</html>
这是个普通的html页面，它可以正常的跳转到页面B，页面B的onload函数也能执行。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta charset="utf-8">
    <title>普通html页面</title>
</head>
<body >
    <a href="test2.html">点我可以跳转到页面B</a>
</body>
</html>
把页面A中的<a>元素改成   <a href="test2.html" data-ajax="false">点击我可以跳转到页面B</a>  问题就解决了。
yuanGrowing
关注
专栏目录
Jquery Mobile如何下载文件
chenkai19951108的博客
12-12 1224
前言 JQuery Mobile的请求基本上都是通过Ajax来完成的，但是ajax请求只是个“字符型”的请求，即请求的内容是以文本类型存放的,文件的下载是以二进制形式进行的也就是流，ajax是不能返回的，虽然可以读取到返回的response，但只是读取而已，是无法执行的。 解决方案，不用ajax： 使用XHR 全称：XMLHttpRequest 废话不多说直接上代码吧： 1. 前端请求 ...
Jquery基础
qq_52338885的博客
01-04 372
1、XML数据格式： 面试题：HTML、XHTML、DHTML、XML分别是什么？ HTML - 网页（预定义标签） XHTML - 更严格的网页 DHTML - 动态效果的网页：并不是新技术，只是统称：HTML+CSS+JS(dom) XML - 配置文件|数据格式 - 现在几乎没人使用，因为最流行的是JSON - 未知的标签语言（没有任何一个预定义的标签，所有标签都需要你自定义） 如何使用： 1、创建后缀名.xml的文件 2、声明头部：&lt...
JQuery-- onload，ready方法详细解说
07-17
(JQuery-- onload，ready方法详细解说
jquery onload事件
shanhuhau的专栏
07-02 1071
[size=medium]如果绑定给window对象，则会在所有内容加载后触发，包括窗口，框架，对象和图像。如果绑定在元素上，则当元素的内容加载完毕后触发。 注意:只有当在这个元素完全加载完之前绑定load的处理函数,才会在他加载完后触发。如果之后再绑定就永远不会触发了。所以不要在$(document).ready()里绑定load事件，因为jQuery会在所有DOM加载完成后再绑定load事件...
Js/jquery(onload)
weixin_30565199的博客
05-09 94
在html+js中，经常出现js加载完而html没有加载完，解决方法如下 方法一：将script语句放在</body>前面，等待所有标签执行完再执行script语句 方法二：在body标签中添加:onload=“fun()”,然后将script语句封装在fun()函数中 <body onload="fun1()"> -----html代码----- ...
jquery的onload事件
piao317110771的博客
11-23 1698
1、代码 &lt;!--引入jquery依赖包--&gt; &lt;script type="text/javascript" src="../jquery-1.11.3.js"&gt;&lt;/script&gt; &lt;script type="text/javascript"&gt; //对于javascript而言，第二个onload会被执行，第一个会被覆盖
JQuery onload、ready使用
做个记录吧
02-28 394
页面加载完成有两种事件，一是ready，表示文档结构已经加载完成；二是onload，指示页 面包含图片等文件在内的所有元素都加载完成（ready 在onload 前加载！！！）。 使用$(window).load()方法，这 个方法会等到页面所有内容加载完毕后才会触发。<script type="text/javascript"> $(window).load(function() {
jQuery mobile在页面加载时添加加载中效果 document.ready 和[removed]执行顺序比较
10-21
本文主要讲述了在jQuery Mobile环境下，如何在页面加载过程中添加加载中效果，并比较了页面加载事件`document.ready`和`window.onload`的执行顺序。同时提供了一些示例代码来展示如何实现这一效果。 首先，了解...
jQuery 认知.docx
09-25
jQuery 由 John Resig 在2006年创建，其团队包括核心库、UI、插件和 jQuery Mobile 等不同领域的专家。这个库的核心理念是“write less, do more”，即通过简洁的语法实现丰富的功能。 jQuery 的引入通常有两种方式...
jQuery2(JQuery实现onload)
xbc1213的博客
02-05 1007
JQuery实现onload注意:dom中的onload,是全部资源加载完后在进行执行,且只能执行一个.而jQuery中是基础元素加载完后就执行,且能执行多个(效率高). 语法:$(function(){});完整的实例:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtm
jquery的$(document).ready()和onload的加载顺序
12-04
最近在改一个嵌入在frame中的页面的时候，使用了jquery做效果，而页面本身也绑定了onload事件。改完后，Firefox下测试正常流畅，IE下就要等个十几秒jquery的效果才出现，黄花菜都凉了。 　　起初以为是和本身onload加载的方法冲突。网上普遍的说法是$(document).ready()是在页面DOM解析完成后执行，而onload事件是在所有资源都准备完成之后才执行，也就是说$(document).ready()是要在onload之前执行的，尤其当页面图片较大较多的时候，这个时间差可能更大。可是我这页面分明是图片都显示出来十几秒了，还不见jquery的效果出来。 　　删了o
jQuery--onload与ready、扩展插件、验证插件
qq_34983808的博客
05-28 227
1、onload与ready的区别 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;window.onload与$(document).ready()&lt;/title&gt; &lt;/head&amp
jQuery的onload问题
berry sky
10-27 3832
jQuery对widow.onload的解决： window.onload会在页面上所有的元素加载完成以后才执行，包含图片等。 但是我们需要的是在dom加载完以后执行，加载整个js方法 jquery提供的解决办法是：Js代码 $(document).ready(function() {       alert('DOM加载完成!');   });  页面中调用：此方法相当于：
jQuery中的页面载入（$()、ready(fn)、onload）
不动声色的小蜗牛的博客
07-19 408
用jQuery进行页面载入时有集中方式，我们通过例子来说明一下： 第一种（通过window.onload()）： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/jquery-1.8.3.js" ></script> &l
jQuery的Ajax--onload()方法 --再研究
愤怒的菜鸟
11-11 3104
AJAX = 异步 JavaScript 和 XML（Asynchronous JavaScript and XML）。 它使用HTTP脚本来按需求加载数据，而不需要刷新整个页面. jQuery内置了Ajax工具来简化使用. load()方法 load(url,data,callback); URL: 必需的 URL 参数规定您希望加载的 URL. 如果只想显示文档的一部分,可以在URL后面添...
load,onload,jquery加载顺序
wxl1390的博客
03-16 1297
load,onload,Jquery加载顺序
window.onload与jquery的$(document).ready
11-07 1164
 第一，window.onload是在网页所有内容全部加载完毕后才执行的，而$(document).ready是在网页DOM全部绘制完毕后才执行的，显然后者比前者速度要快得多。如果网页中要显示一幅比较大的图片的话那么需要等待很长时间才去执行window.onload，所以我们有时候应该尽量去避免这种情况的发生。而$(document).ready不需要去等待图片是否下载完毕，只要文档对象(即DOM
JQuery的ready函数与JS的onload的区别
rotating_windmill
11-09 467
JQuery的ready函数与JS的onload的区别： 1.执行时间  window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。  $(document).ready()是DOM结构绘制完毕后就执行，不必等到加载完毕。  2.编写个数不同  window.onload不能同时编写多个，如果有多个window.onload方法，只会执行一个  $(docu
jquery中的ready()和onload事件
Eason_______的博客
07-30 3674
ready()方法作用： 在页面加载完成后，立即执行指定的函数。这么做的好处是可以减少页面渲染的时间，加快页面加载，提升用户体验（自己理解，如有不对，欢迎评论指正。） ready()相比onload事件绑定函数的优势： 具有较高优先级，只需等到html结构加载完成后即可执行；而onload必须等到图片在内的所有元素加载完毕后才执行。除了使用target选择器时需要结合window.onload，大多数我们都可以使用ready()来进行编写js代码。 jquery中的ready()的三种写法 1.$().re
微信小程序onload函数
最新发布
04-06
微信小程序中的onLoad函数是页面生命周期函数之一，用于监听页面加载。当页面加载时，onLoad函数会被自动调用，并可以接收一个options参数，该参数包含了页面跳转时所带来的参数。开发者可以在onLoad函数中对页面...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值