关于jquery mobile使用<a href="#"></a>进行页面跳转返回上一页出现空白页问题的解决

最新推荐文章于 2024-01-26 08:34:28 发布
最新推荐文章于 2024-01-26 08:34:28 发布
阅读量5.2k 收藏 3
点赞数 1
分类专栏： jquery mobile学习 文章标签： jquerymobile 页面加载 空白页面 a href#
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u010682362/article/details/42268977
版权
当在  Jquery Mobile支持所有标准的html格式，为了让体验更加流畅,Jquery Mobile会把同一个域下的所有指向页面的链接都会自动转为ajax请求，并且用动画的转场效果实现切换指向别的域的链接或者是含有 rel="external", data-ajax="false" 属性的链接以及含有target属性的链接不会通过ajax加载，页面才会整体被刷新。否则由于chrom
摘要由CSDN通过智能技术生成
当在   Jquery Mobile支持所有标准的html格式，为了让体验更加流畅,Jquery Mobile会把同一个域下的所有指向页面的链接都会自动转为ajax请求，并且用动画的转场效果实现切换
指向别的域的链接或者是含有 rel="external", data-ajax="false" 属性的链接以及含有target属性的链接不会通过ajax加载，页面才会整体被刷新。否则由于chrome为了提高页面的加载速度，采用了ajax加载，页面不会整体被刷新。只有局部的会刷新，所以导致链接返回上一个页面的时候出现了空白页面的情况，因此，只要在button按钮上加上data-ajax="false"，在返回上一个页面就不会再出现空白页面的问题，不过这样也会使之前为该button设置的所有属性失效
原来返回上一个页面会出现空白页的例子：
 <a href="index.php" data-role="button" data-icon="arrow-l" data-infile="true" data-corners="true" data-iconshadow="false" data-transition="slide" data-direction="reverse">返回</a>
最低0.47元/天 解锁文章
我是挨踢民工我为自己袋盐
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery加载（load、get、post）页面显示空白原因
zhuyangyong的博客
03-28 1636
 使用jQuery  load一个目标页面(html,jsp,php等)会显示空白，而直接打开又正常显示的原因 尝试了N种办法，终于找出： 1、存在没有完全成对闭合的HTML标签（如DIV、UL、LI等） 2、加载目标页面可以正常使用JS代码，并被正常加载生效   经过这两天的搜索与验证；网上的人都说生成的目标页面不能包括js或css；或者说目标页面的内容过多显示不出来；...
jQueryMobile之Helloworld与页面切换的方法
10-24
<li><a href="#page2" data-role="button">页面2</a></li> </ul> </div> </div> </div> <!-- 创建第二个页面 --> <div data-role="page" id="page2"> <div data-role="header" data-theme="b" data-tap-...
jq禁止页面回退（防止第二个页面）
魔法程序媛的博客
01-07 567
<script> $(function () { history.pushState(null, null, document.URL); window.addEventListener('popstate', function () { history.pushState(null, null, document.UR...
jquery的load方法加载页面空白，js不起作用
weixin_43105949的博客
08-02 1672
jquery的load方法加载页面空白，js不起作用，但是页面不是完全空白，html进行了加载，但是js没有加载，最后使用博主的第二个方法解决。但是毕竟困惑的是我所用的封装的load是做了 _loadScript(scripts[i]);的封装和调用，不明白为什么要再次加载才能解决。 解决方法入下： https://mp.csdn.net/configure 转载此大佬 orange.loadP...
vue使用query直接传了一个对象，页面刷新数据丢失问题
m0_67841039的博客
08-15 2705
第一次跳转数据是没问题的，但第二次刷新页面数据会变为数组
使用a标签的href属性拨打电话在移动端安卓手机上的兼容问题
胡小念
12-07 2602
**Uncaught NotFoundError: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node** 上面这个错误是因为v-if和jq的混乱使用导致的。 在利用fullpage.js写移动端的...
a标签跳转到指定div,jquery添加和移除class属性的实现方法
12-29
如果使用a标签跳转到指定的div区域，则只需要把a标签的href属性设置为“#divId”就好了，比如： <a>跳转到div</a> <div di=dction_1> 这里是被跳转的区域 </div> 第二个，使用jquery添加或者移除class属性 也很...
js，jquery滚动/跳转页面到指定位置的实现思路
10-25
在源页面（例如A页面）上设置一个链接，目标页面（例如B页面）对应位置设置一个锚点。当用户点击链接时，浏览器会跳转到B页面并自动滚动到锚点所在的位置。 1. **使用HTML锚点** 在A页面创建一个链接，链接的目标...
jquery页面跳转loading加载特效代码
03-20
标题“jquery页面跳转loading加载特效代码”涉及的是在网页使用jQuery实现页面跳转时的加载效果，通常是为了提供更好的用户体验，让用户知道页面正在加载新内容。jQuery是一种广泛使用的JavaScript库，它简化了HTML...
jQuery Mobile页面跳转后未加载外部JS原因分析及解决
12-09
在使用jQuery Mobile进行Web开发中，当页面跳转时（pageA => pageB），在pageB中引用的JS并未成功运行。因为，JQM并为将整个页面加载到当前的dom中，仅将data-role=”page”元素加入当前的dom中。因此，在<head&...
jquery弹窗，不显示页面，显示空白
weixin_43281120的博客
11-13 486
原因： freemarker的字体不变色 解决方法： 但是他们都是一样的，也没有哪里写错了，就很奇怪。昨天还能运行，今天就突然不变色。很怪！！ 看来是这idea要搞我，难受！！ ...
a标签跳转超链接为空白页,正常访问可以显示
无敌暗黑暴龙神的博客
12-10 2029
a标签中href写入一个地址链接，点击跳转打开的网页是空白的，单独访问这个地址链接是正常的，使用onclick="window.location.href=''"也无法正常访问
点击a标签，跳转链接显示空白
最新发布
记录
01-26 564
使用target="_blank"打开一个新的标签页时，新页面的window对象上有一个属性 opener ,它指向的是前一个页面的window对象，通过window.opener可以获取到源页面的部分控制权，即使新打开的页面是跨域也可以获取部分控制权。新的页面可以通过window.opener 访问您的窗口对象，并且它可以使用 window.opener.location = newURL将您的页面导航至不同的网址。a标签中添加一个rel属性，rel=”noopener noreferrer”
JQuery Mobile 弹出式登录框方法
BesturnLee
01-31 3285
Login Please sign in Username: Password: Sign in
JQuery Mobile入门——外部页面链接
Misslay's
02-16 470
参考：http://blog.csdn.net/liang408015204/article/details/8479030内部链接是通过在标签内将href属性值设为#+id的形式，外链则是在中增加rel属性，并将属性值设为external，3i Studio`
关于a标签中href属性的多种用法
lazycat的博客
04-14 8531
1. 拨打电话 &lt;a href="tel:13800013088"&gt;13800013088&lt;/a&gt; 2. 唤起QQ &lt;a href="tencent://message/?Menu=yes&amp;uin=1248106922" target="_blank" class="fixed-qq" data-type="qq&q
请优化这段代码：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>下拉菜单</title> <style type="text/css"> .nav { margin: 100px; } .nav>li { position: relative; float: left; width: 80px; height: 41px; text-align: center; } .nav li a { display: block; width: 100%; height: 100%; line-height: 41px; color: #333; } /* .nav>li ul{ display: none; position: absolute; top: 20px; right: 21px; } */ </style> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> </head> <body> <!-- p181 --> <ul calss="nav"> <li><a href="#">微博</a> <ul> <li><a href="#">私信</a></li> <li><a href="#">评论</a></li> <li><a href="#">@我</a></li> </ul> </li> <li><a href="#">留言板</a> <ul> <li><a href="#">私信</a></li> <li><a href="#">评论</a></li> <li><a href="#">@我</a></li> </ul> </li> <li><a href="#">电话</a> <ul> <li><a href="#">私信</a></li> <li><a href="#">评论</a></li> <li><a href="#">@我</a></li> </ul> </li> <li><a href="#">邮箱</a> <ul> <li><a href="#">私信</a></li> <li><a href="#">评论</a></li> <li><a href="#">@我</a></li> </ul> </li> </ul> <script type="text/javascript"> $(".nav>li").mouseover( function() { $(this).children("ul").show(); } ); $(".nav>li").mouseout( function() { $(this).children("ul").hide(); } ); </script> </body> </html>
06-03
这段代码可以进行以下优化： 1. 将 `ul` 标签的 `class` 属性名从 `calss` 改为 `class`。 2. 将 JavaScript 代码放在 HTML 结构后面，以确保 DOM 树已经加载完毕。 3. 使用 CSS 的 `display` 属性代替 JavaScript 控制下拉菜单的显示和隐藏。 4. 为了提高代码的可维护性，可以将 JS 代码中的 `$(".nav>li")` 提取出来作为变量。 下面是优化后的代码： ``` <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>下拉菜单</title> <style type="text/css"> .nav { margin: 100px; } .nav>li { position: relative; float: left; width: 80px; height: 41px; text-align: center; } .nav li a { display: block; width: 100%; height: 100%; line-height: 41px; color: #333; } /* 隐藏下拉菜单 */ .nav ul { display: none; position: absolute; top: 41px; left: 0; } </style> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <script type="text/javascript"> $(function() { var navLi = $(".nav>li"); // 鼠标移入显示下拉菜单 navLi.mouseover(function() { $(this).children("ul").show(); }); // 鼠标移出隐藏下拉菜单 navLi.mouseout(function() { $(this).children("ul").hide(); }); }); </script> </head> <body> <!-- p181 --> <ul class="nav"> <li><a href="#">微博</a> <ul> <li><a href="#">私信</a></li> <li><a href="#">评论</a></li> <li><a href="#">@我</a></li> </ul> </li> <li><a href="#">留言板</a> <ul> <li><a href="#">私信</a></li> <li><a href="#">评论</a></li> <li><a href="#">@我</a></li> </ul> </li> <li><a href="#">电话</a> <ul> <li><a href="#">私信</a></li> <li><a href="#">评论</a></li> <li><a href="#">@我</a></li> </ul> </li> <li><a href="#">邮箱</a> <ul> <li><a href="#">私信</a></li> <li><a href="#">评论</a></li> <li><a href="#">@我</a></li> </ul> </li> </ul> </body> </html> ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值