【问题标题】：Adding scripts to the external pages in jquery mobile other than the home file将脚本添加到 jquery mobile 中的外部页面而不是主文件
【发布时间】：2013-07-09 13:45:18
【问题描述】：

我想将脚本添加到 jquery mobile 中的外部页面，而不是主文件（调用 jquery mobile 的源）。这是我的两个文件的代码

index.php里面的代码

 <head> 
        <title>My Web Application</title> 
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0;"  />
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <link rel="stylesheet" href="view/css/mobile.css" />
        <link rel="stylesheet" href="view/css/reset.css" />
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
        <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
        <script type="text/javascript" src="view/js/light.js"></script>

    </head>
    <body>

        <div data-role="page" class="page">
            <div data-role="header" id="index-header" data-theme="b">
                <div id="logo">
                    <a href="#"><img src="view/images/Milan.png" alt="logo" height="80"></a>    
                </div>
            </div>
            <div id="color-bar"></div>  
            <div data-role="content">
                <ul data-role="listview" data-inset="true" data-theme="b">

                    <li><a href="#" title="theme"><img src="view/images/1.png" />Security</a></li>
    <li><a href="light.php" title="calendar"><img src="view/images/2.png" />Info</a></li>
    <li><a href="light.php" title="theme"><img src="view/images/3.png" />Lighting</a></li>
    <li><a href="light.php" title="calendar"><img src="view/images/4.png" />Comfort</a></li>
    <li><a href="light.php" title="theme"><img src="view/images/5.png" />Music</a></li>
    <li><a href="light.php" title="calendar"><img src="view/images/6.png" />Media</a></li>
                </ul>               
            </div><!-- /content -->
    </div><!-- /page -->
</body>

在这里，单击我的锚标记，页面将被重定向到 light.php。在 light.php 中，我无法添加任何外部脚本。如果我想在 light.php 中使用任何脚本，它希望我将它添加到 index.php 中。但我想在 light.php 中添加我的脚本并让它只为 light.php 运行。这就是我想在 light.php 中添加的脚本

<script type="text/javascript">
    var auto_refresh = setInterval(
            function ()
            {
            window.location = "index.php?page=lighting";
            }, 1000);
    </script>

当我刷新我的 light.php 文件时，脚本似乎可以工作，但我想让它在不刷新的情况下工作。

【问题讨论】：

标签： jquery html jquery-mobile external-js

【解决方案1】：

jQuery Mobile 如何处理页面变化

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

首页加载正常。它的 HEAD 和 BODY 被加载到 DOM 中，它们在那里等待其他内容。加载第二个页面时，仅将其 BODY 内容加载到 DOM。

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

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

解决方案：

在您的第二页和其他所有页面中，将您的 SCRIPT 标记移动到 BODY 内容中，如下所示：
将您所有的 javascript 移动到原始的第一个 HTML 中。收集所有内容并将其放入单个 js 文件中，放入 HEAD。在加载 jQuery Mobile 后对其进行初始化。
在您的按钮和用于更改页面的每个元素中使用 rel="external"。因为它不会使用 ajax 来加载页面，并且您的 jQuery Mobile 应用程序将像普通的 Web 应用程序一样运行。

jQuery Mobile 如何处理页面变化

解决方案：

更多信息