为什么我必须将所有脚本都放在 jquery mobile 中的 index.html 中 [英] Why I have to put all the script to index.html in jquery mobile

问题描述

我使用 $.mobile.changepage 在我的 phonegap+jquerymobile 项目中进行重定向.然而让我感到困惑的是，我需要将所有页面的脚本放在同一个文件 index.html 中.如果不是，则重定向页面无法执行其标头中的功能.

例如，我的 index.html 似乎是$(document).bind("deviceready",function(){$.mobile.changepage("test.html");})

然后，我的设备将重定向到 test.html 似乎是

$("#btnTest").click(function(){alert("123");})<button id="btnTest">Test</button>

然而，脚本永远不会在 test.html 中执行.然后我把脚本放到index.html，我期望的就完成了.不管怎样，如果我把所有的脚本都放在同一个页面上，这个项目将变得越来越难以保存.感谢您的帮助.

解决方案

Intro

这篇文章也可以在在这里作为我博客的一部分.

jQuery Mobile 如何处理页面变化

要了解这种情况，您需要了解 jQuery Mobile 的工作原理.它使用ajax加载其他页面.

首页正常加载.它的HEAD和BODY被加载到DOM>，他们在那里等待其他内容.当加载第二个页面时，只有它的 BODY 内容被加载到 DOM 中.更准确地说，即使 BODY 也没有完全加载.只有第一个具有 data-role="page" 属性的 div将被加载，其他所有内容都将被丢弃.即使您在 BODY 中有更多页面，也只会加载第一个页面.此规则仅适用于后续页面，如果您在初始 HTML 中有更多页面，则所有页面都将被加载.

这就是您的按钮显示成功但单击事件不起作用的原因.相同的点击事件，其父 HEAD 在页面转换期间被忽略.

这是官方文档:http://jquerymobile.com/demos/1.2.0/docs/pages/page-links.html

不幸的是，您不会在他们的文档中找到这一点.以太他们认为这是一个常识，或者他们忘记像我的其他主题一样描述这个.(jQuery Mobile 文档很大但缺少很多东西).

解决方案 1

在您的第二页以及其他所有页面中，将您的 SCRIPT 标签移到 BODY 内容中，像这样:

<div data-role=页面">//其余的 HTML 内容<脚本>//你的 javascript 会在这里

这是一个快速的解决方案，但仍然很丑陋.

可以在我的其他答案中找到工作示例:更改页面后未触发页面显示

另一个工作示例:页面加载方式不同jQuery-mobile 过渡

解决方案 2

将您所有的 javascript 移动到最初的第一个 HTML 中.收集所有内容并将其放入单个 js 文件中，放入 HEAD.加载 jQuery Mobile 后对其进行初始化.

<元名称=视口"内容=宽度=设备宽度；初始规模=1.0；最大尺度=1.0；最小尺度=1.0；用户可扩展=否；目标密度Dpi=设备-dpi"/><link rel="样式表";href=http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css"/><script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"</script><script src="index.js"></script>//把你的代码放到一个新文件中

最后我将描述为什么这是一个好的解决方案的一部分.

解决方案 3

在按钮和用于更改页面的每个元素中使用 rel="external".因此，ajax 不会用于页面加载，您的 jQuery Mobile 应用程序将像普通的 Web 应用程序一样运行.不幸的是，这对您的情况来说不是一个好的解决方案.Phonegap 不应作为普通的网络应用程序运行.

官方文档，找一章:链接没有 Ajax

现实的解决方案

现实的解决方案将使用解决方案 2.但与解决方案 2 不同的是，我将使用相同的 index.js 文件并在每个可能的其他页面的 HEAD 内对其进行初始化.

现在你可以问我为什么?

Phonegap 就像 jQuery Mobile 是有问题的，迟早会出现错误，如果您的每个 js 内容都是在单个 HTML 文件中.DOM 可以被删除，Phonegap 将刷新您当前的页面.如果该页面没有 javascript，则在重新启动之前它将无法工作.

最后的话

这个问题可以通过良好的页面架构轻松解决.如果有人感兴趣，我写了一篇 ARTICLE 关于良好的 jQuery Mobile 页面架构.简而言之，我正在讨论有关 jQuery Mobile 工作原理的知识是您在成功创建第一个应用程序之前需要了解的最重要的事情.

I have used $.mobile.changepage to do the redirect in my phonegap+jquerymobile projects. However what makes me confused is that I need to put the script of all the pages to the same file index.html. If not, the redirect page can not execute the function in its header.

for example, my index.html seem to be $(document).bind("deviceready",function(){$.mobile.changepage("test.html");})

then, my device will redirect to test.html which seem to be

$("#btnTest").click(function(){alert("123");})
<button id="btnTest">Test</button>

However, the script will never execute in test.html. Then I put the script to index.html, what I expect to be is done. Whatever, if I put all the script to the same page, the project will become harder and harder to be preserved. Appreciated for your help.

解决方案

Intro

This article can also be found HERE as a part of my blog.

How jQuery Mobile handles page changes

To understand this situation you need to understand how jQuery Mobile works. It uses ajax to load other pages.

First page is loaded normally. Its HEAD and BODY is loaded into the DOM, and they are there to await other content. When second page is loaded, only its BODY content is loaded into the DOM. To be more precise, even BODY is not fully loaded. Only first div with an attribute data-role="page" will be loaded, everything else is going to be discarded. Even if you have more pages inside a BODY only first one is going to be loaded. This rule only applies to subsequent pages, if you have more pages in an initial HTML all of them will be loaded.

That's why your button is show successfully but click event is not working. Same click event whose parent HEAD was disregarded during the page transition.

Here's an official documentation: http://jquerymobile.com/demos/1.2.0/docs/pages/page-links.html

Unfortunately you are not going to find this described in their documentation. Ether they think this is a common knowledge or they forgot to describe this like my other topics. (jQuery Mobile documentation is big but lacking many things).

Solution 1

In your second page, and every other page, move your SCRIPT tag into the BODY content, like this:

<body>
    <div data-role="page">
        // And rest of your HTML content
        <script>
            // Your javascript will go here
        </script>
    </div>
</body>

This is a quick solution but still an ugly one.

Working example can be found in my other answer here: Pageshow not triggered after changepage

Another working example: Page loaded differently with jQuery-mobile transition

Solution 2

Move all of your javascript into the original first HTML. Collect everything and put it inside a single js file, into a HEAD. Initialize it after jQuery Mobile has been loaded.

<head>
    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>    
    <script src="index.js"></script> // Put your code into a new file
</head>

In the end I will describe why this is a part of a good solution.

Solution 3

Use rel="external" in your buttons and every elements you are using to change page. Because of it ajax is not going to be used for page loading and your jQuery Mobile app will behave like a normal web application. Unfortunately this is not a good solution in your case. Phonegap should never work as a normal web app.

<a href="#second" class="ui-btn-right" rel="external">Next</a>

Official documentation, look for a chapter: Linking without Ajax

Realistic solution

Realistic solution would use Solution 2. But unlike solution 2, I would use that same index.js file and initialize it inside a HEAD of every possible other page.

Now you can ask me WHY?

Phonegap like jQuery Mobile is buggy, and sooner or later there's going to be an error and your app will fail (including loaded DOM) if your every js content is inside a single HTML file. DOM could be erased and Phonegap will refresh your current page. If that page don't have javascript that it will not work until it is restarted.

Final words

This problem can be easily fixed with a good page architecture. If anyone is interested I have wrote an ARTICLE about good jQuery Mobile page architecture. In a nut shell I am discussing that knowledge of how jQuery Mobile works is the most important thing you need to know before you can successfully create you first app.

这篇关于为什么我必须将所有脚本都放在 jquery mobile 中的 index.html 中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！