jquery mobile+html5 写的页面 如何禁用手机后退按钮。或者说如何禁用页面后退。
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jquery mobile+html5 写的页面 如何禁用手机后退按钮。或者说如何禁用页面后退。相关的知识,希望对你有一定的参考价值。
jquery mobile+html5 写的页面 如何禁用手机后退按钮。或者说如何禁用页面后退。
参考技术A html5的popState事件响应的时候,手动调用pushState。应该就可以了。。我没试过,就讲个思路。
其实就是,每次监听到后退的事件的时候,我在响应事件里头,手动调用一次前进(回到原来页面)。这样就能实现停留在原来页面了。
思路二,依然在popState的响应函数里头,我觉得,应该有某个方法,可以截断事件的默认响应行为。。就是截断(popState接下去的行为,从而让浏览器不后退。)。记得jquery里头貌似有个stopDefault开头的一个函数,忘了。
Jquery Mobile - $ .mobile.changepage没有加载外部.JS文件
所以我很难让$.mobile.changePage
正常运作。我称之为:
$.mobile.changePage( "DataformsM-AddRecord.html", { transition: "slide"} );
但由于某种原因,当加载HTML页面时,没有包含任何外部.js(我写的实际做某事的文件)。我正在遵循重要的装载惯例
-Jquery
-(CUSTOM JS)
-Jquery Mobile
有谁知道为什么没有正确加载?此外,页面显示功能也没有被解雇,这很奇怪。它看起来像这样:
$("div[data-role*='page']").live('pageshow', function(event, ui) {
loadFormFields();
});
现在页面已呈现,但没有任何功能发生。如果我破解它并做这样的事情:
document.location.href="DataformsM-AddRecord.html";
它将正常运作。
jQuery Mobile没有将整个页面拉入dom,它抓住了第一个data-role="page"
元素及其后代并将其拉入当前的dom。
因此,文档的<head>
中的任何脚本都不会包含在内。
我通常将我网站上的所有功能JavaScript放在索引页面上,然后当外部页面加载到dom中时,他们可以从已经加载的脚本中受益。
此外,您可以将JavaScript代码放在data-role="page"
元素中,当jQuery Mobile对其进行AJAX加载时,它将被包含在内。
UPDATE
一个好的系统是将所有JS放入包含文件并将其包含在站点的每个页面上。如果通过AJAX将页面带入DOM,它将被忽略,但如果有人在您的站点中的某个地方刷新,则JS将可用。
因此,基于贾斯珀上面明智地提到的内容,我想出了一个有效的解决方案。
基本上我将所有JS和CSS文件加载到索引页面中以启动。现在加载时,将为pageshow
触发此方法
$("div[id*='page1']").live('pageshow', function(event, ui) {
setTimeout(function() { window.scrollTo(0, 1) }, 100);
doStuffWhenPageintializes();
});
一旦我调用$.mobile.changePage( "someOtherPage.html", { transition: "slide"} );
,pagehide
方法将被触发page1对象。您可以在此处触发方法来初始化要转换的页面。
$("div[id*='page1']").live('pagehide', function(event, ui) {
setTimeout(function() { window.scrollTo(0, 1) }, 100);
loadStuffForNewPage();
});
现在您可以删除document.location.href="external.html"
行并简单地使用本机JQM调用。希望这可以帮助一些人。
请重复每个html页面中所有脚本的head部分,因为更改页面将导致重新加载页面并重新创建head section ...
这样一个简单的更改页面就可以了:
$.mobile.changePage('abc.html', {
transition: 'slide'
});
似乎JQM没有提供加载外部html文件的“正确”方式。非常感谢贾斯珀的解决方案。
如果我们想切换到外部页面,JQM建议重新加载AJAX,例如:
<a href="foo.html" rel="external">
要么
<a href="foo.html" data-ajax="false">
我尝试了两种方法,但它们没有用 - 我为本机应用程序编程,所以它可能适用于网络应用程序?
我通过将脚本放在最后加载的页面的头部分来解决这个问题,这对我来说是有用的。 JQM没有获取DOM中最近加载的页面的头部,因此没有带来最近页面的JS内容。通过将所有脚本放在外部JS文件中或将其放在第一页的头部分中,可能会为您提供帮助。
我也正在寻找这个解决方案加载外部页面的“正确方法”。但是,我会同意,你的黑客确实有效。我现在要接受黑客攻击:
$(document).ready(function(){
$("#page1").bind('ended', function(){
$.mobile.changePage($(document.location.href="external.html"), 'fade');
});
});
以上是关于jquery mobile+html5 写的页面 如何禁用手机后退按钮。或者说如何禁用页面后退。的主要内容,如果未能解决你的问题,请参考以下文章