mobile jquery onload函数问题
一、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> 问题就解决了。
mobile jquery onload函数问题相关推荐
- jQuery中的read 和JavaScript中 的onload函数的区别
2019独角兽企业重金招聘Python工程师标准>>> 在JavaScript中,onload函数是最经常用到的,这个函数的作用是等待网页完全加载之后再去执行代码块中的语句,因为按照 ...
- 【08】jQuery：01-jQuery介绍、jQuery基本使用、jQuery选择器、jQuery样式操作、jQuery效果、jQuery入口函数、jQuery对象
文章目录 day01 - jQuery 1.1. jQuery 介绍 1.1.1 JavaScript 库 1.1.2 jQuery的概念 1.1.3 jQuery的优点 1.2. jQuery 的基 ...
- jQuery入口函数
1.原生js的入口函数 <script type="text/javascript">// 原生js的入口函数.页面上所有内容加载完毕, 才执行.// 不仅要等文本加载 ...
- jquery animate函数实现
jquery animate 函数 实现动画效果 参数一 比如高度宽度 之类的:'-=50' 参数二 速度之类 <html xmlns="http://www.w3.org/1999/ ...
- jQuery.extend 函数使用详解
jQuery.extend 函数使用详解 一.总结 一句话总结: jquery $.extend的作用就是:用于将一个或多个对象的内容合并到目标对象:$.extend( target [, objec ...
- 从零开始学习jQuery (九) jQuery工具函数
本系列文章导航 从零开始学习jQuery (一) 开天辟地入门篇 从零开始学习jQuery (二) 万能的选择器 从零开始学习jQuery (三) 管理jQuery包装集 从零开始学习jQuery ( ...
- 关于JQUery.parseJSON()函数的知识札记
JSON数据也许大家都很陌生,而对我来讲属于半成品,由于项目问题,做web虽然用的是JSON数据格式传输,但是关于解析这一块还真不知道该注意什么,更不知道它是如何解析的,由于最近要把串口通信协议与此一 ...
- [zz]jQuery.extend 函数详解
JQuery的extend扩展方法: Jquery的扩展方法extend是我们在写插件的过程中常用的方法,该方法有一些重载原型,在此,我们一起去了解了解. 一.Jquery的扩 ...
- jQuery.parseJSON()函数详解
jQuery.parseJSON()函数用于将格式完好的JSON字符串转为与之对应的JavaScript对象. 所谓"格式完好",就是要求指定的字符串必须符合严格的JSON格式,例 ...
最新文章
- 自动删除指定文件夹下N天前文件的批处理
- 小米澄清传闻：不存在跨境转移利润及逃避缴纳税款行为
- ABAP webservice运行时的HTTP 307 redirect重定向是怎么来的
- python调试器入门教程_PyCharm入门第一步（二）——调试第一个Python应用|python基础教程|python入门|python教程...
- 算力云服务器是干啥的,云服务器将成趋势计算力和安全性是考验
- 关于概率算法的问题，不知道逻辑错在哪里，求debug
- 查询数据时给列起别名的三种方法
- java mysql emoj报错_MySQL插入emoji表情报错 SQLException: Incorrect string value 的两种解决方案...
- Java 阶乘（BigInteger）
- 福建省12.5米DEM数字高程数据
- 云计算、分布式计算和网格计算，主要有什么区别，基本概念是什么？
- 用js写卡牌游戏（四）
- 【数据结构】哈希（Hash）
- 数据可视化笔记4 结构数据的可视化图形
- 风格迁移1-00：Liquid Warping GAN(Impersonator)-目录-史上最新无死角讲解
- 电脑运行速度慢的处理
- 单目标跟踪算法调研（2019）
- krait和kryo_回归四核的自主Kryo架构_手机_手机评测-中关村在线
- 数据结构 | 第十一章：二叉树和其他树 | 【前序遍历】【中序遍历】【后序遍历】【层次遍历】 | 并查集
- excel 宏 汉子转拼音缩写