Jquery mobile：加载前重定向到另一个页面
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9386251/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Jquery mobile: redirect to another page before loading
提问by Avisek Chakraborty
am using jquery mobile 1.0
我正在使用 jquery mobile 1.0
I want to redirect from first.htmlto otherPage.htmlwithout showing content of first.html
我想从first.html重定向到otherPage.html而不显示first.html 的内容
$("#pageId").live("pagebeforecreate", function(event) {
window.location.href = "otherPage.html";
});
-i tried almost every event, but not succeed. The first.htmlis shown up for a moment.
-我几乎尝试了所有事件，但没有成功。该first.html显示了一会儿。
Then, I tried with 'pagebeforeload' event, but it isnt triggered
然后，我尝试使用 'pagebeforeload' 事件，但它没有被触发
$( document ).bind( "pagebeforeload", function( e, data ){
console.log("pagebeforeload starting"); // NO LOGGING HAPPENING
window.location.href = "otherPage.html";
e.preventDefault();
data.deferred.resolve( data.absUrl, data.options, response.page);
});
$( document ).bind( "pageload", function( e, data ){
console.log("Page successfully loaded into DOM..."); // NO LOGGING HAPPENING
});
-am not much clear about this event & didn't find a workable example for it. -Can anybody plz help!
- 我对这个事件不太清楚，也没有找到一个可行的例子。-任何人都可以帮忙！
回答by Suryavel TR
Try This One
试试这个
$("#firstPageId").live("pagecreate",function(){
$.mobile.changePage("otherPage.html");
});
Also, You can use loadPage
此外，您可以使用loadPage
Hope it helps :)
希望能帮助到你 ：）
回答by Josh Stuart
The pagebeforeload event is only triggered when external pages are loaded in:
pagebeforeload 事件仅在加载外部页面时触发：
Whenever an external page is loaded into the application DOM, 2 events are fired. The first is pagebeforeload. The 2nd event will be either pageload or pageloadfailed.
每当外部页面加载到应用程序 DOM 中时，都会触发 2 个事件。第一个是pagebeforeload。第二个事件将是 pageload 或 pageloadfailed。
My only idea to get around this would be to load the page contents of first.htmlasynchronously, which isn't ideal because you end up making 2 http requests for the same page. However this will give you the ability to only call the first-contents.htmlif it's needed, otherwise you can redirect to otherPage.htmlwithout anything showing. eg:
我解决这个问题的唯一想法是异步加载first.html的页面内容，这并不理想，因为您最终会为同一页面发出 2 个 http 请求。但是，这将使您能够仅在需要时调用first-contents.html，否则您可以重定向到otherPage.html而不显示任何内容。例如：
<script>
someCondition=true;
if(someCondition) {
window.location.href = "otherPage.html";
} else {
$(document).ready(function() {
$('body').load('first-content.html', function() {
//other stuff after the contents have loaded: like the rest of your jquery relating to first.html
});
});
}
</script>
Make sure the body tags are empty in the first.htmlpage.
确保first.html页面中的 body 标记为空。
回答by Endophage
Have you tried simply not using an event. JS code will get executed as it is encountered so making sure your conditional code is at the top of the page (in the head somewhere) should be enough.
您是否尝试过不使用事件。JS 代码将在遇到时执行，因此确保您的条件代码位于页面顶部（位于头部某处）就足够了。
<html>
<head>
<script>
if (condition)
{
window.location.href = "otherPage.html";
}
</script>
<!-- rest of page -->
回答by Kiliman
It's hard to tell what you're trying to accomplish. Like Endophage states, you can do a simple JavaScript redirect if all you want to do is go to a different page.
很难说你想要完成什么。与 Endophage 状态一样，如果您只想转到不同的页面，则可以执行简单的 JavaScript 重定向。
I'm assuming that you want to be able to choose whether to display the contents of the first or second page but still stay on the first page.
我假设您希望能够选择是显示第一页还是第二页的内容，但仍保留在第一页上。
You can add the following code. Make sure you add it beforeyou include jquery.mobile.
您可以添加以下代码。确保在包含 jquery.mobile之前添加它。
<script>
$(document).bind('mobileinit', function () {
// disable autoInitialize
$.mobile.autoInitializePage = false;
});
$(function () {
var displaySecondPage = true;
if (displaySecondPage) {
// load page2.html and replace #page1 with contents of #page2 on page2.html
$('#page1').replaceWith($('<div />').load('page2.html #page2', function() {
// continue initialize
$.mobile.initializePage();
}));
}
else {
// continue initialize
$.mobile.initializePage();
}
});
</script>
Basically we bind to mobileinitso we can disable autoInitialize. This gives us more control of when to display the first page.
基本上我们绑定到mobileinit所以我们可以禁用autoInitialize. 这使我们可以更好地控制何时显示第一页。
Now we can use a standard jQuery ready handler to test for our condition, and if true, load the contents of page2.html and replace the #page1page. Notice I'm using the $.loadmethod with the page fragment syntax. This means you have to know the page id you want to load.
现在我们可以使用标准的 jQuery 就绪处理程序来测试我们的条件，如果为真，则加载 page2.html 的内容并替换#page1页面。请注意，我正在使用$.load具有页面片段语法的方法。这意味着您必须知道要加载的页面 ID。
Once the page is loaded, you can call $.mobile.initializePageto allow jquery mobile to render the new page.
页面加载后，您可以调用$.mobile.initializePage以允许 jquery mobile 呈现新页面。
To prevent the contents of the first page to display during this load, I add the following CSS in my stylesheet:
为了防止在此加载期间显示第一页的内容，我在样式表中添加了以下 CSS：
div[data-role='page'] {
display: none;
}
jQuery Mobile takes care of showing and hiding pages, so making them all hidden by default will ensure you don't get a flash of unenhanced content.
jQuery Mobile 负责显示和隐藏页面，因此默认情况下将它们全部隐藏将确保您不会看到未经增强的内容。
Anyway, hope this helps.
无论如何，希望这会有所帮助。
回答by Josh Stuart
Try using this:
尝试使用这个：
<head>
<script>
window.location.replace('otherPage.html');
</script>
</head>
回答by Pavel Dubinin
I know this is old, but I spent some time trying to solve that, so this might be useful to somebody.
我知道这很旧，但我花了一些时间试图解决这个问题，所以这可能对某人有用。
Now, with jquery mobile 1.3, you can simply set data-url to the <div data-role="page" data-url="...">on the target page. JQM will detect that and update urls accordingly.
现在，使用 jquery mobile 1.3，您可以简单地将 data-url 设置<div data-role="page" data-url="...">为目标页面上的 。JQM 将检测到并相应地更新 url。
See more here http://jquerymobile.com/demos/1.0rc2/docs/pages/page-links.html
在此处查看更多信息http://jquerymobile.com/demos/1.0rc2/docs/pages/page-links.html
And even some demo here http://jquerymobile.com/demos/1.3.0-beta.1/docs/demos/redirect/index.html
甚至还有一些演示http://jquerymobile.com/demos/1.3.0-beta.1/docs/demos/redirect/index.html
回答by Chad Brown
Since it seems like there are very answers to this; especially when you are using a multi-page template .. here's a link to an answer on jquery mobile forms that does work by injecting the # tag into the url before page init
因为这似乎有很多答案; 特别是当您使用多页模板时.. 这里有一个链接到 jquery 移动表单的答案，它通过在页面初始化之前将 # 标记注入 url 来工作
Doesn't work in my case since I don't want the user viewing the hash tag but it's a start .. more to come later
在我的情况下不起作用，因为我不希望用户查看哈希标签，但这是一个开始 .. 以后还会有更多
