rad*_*uns 3 html jquery external-js jquery-mobile
我想将脚本添加到 jquery mobile 中的外部页面而不是 home 文件（调用 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 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 应用程序一样运行。