如何在页面加载时执行JavaScript？

Question

如何在页面加载时执行JavaScript？

javascripthtmljquery-mobile

3

我使用jQuery Mobile。但是当我将页面作为页面在另一个html文件中加载时，head标签中的javascript不会执行。我检查了源代码，并发现head标签仍然是原始的。所以当页面加载时，我该怎么做才能运行脚本？

编辑1：我也尝试在body标签内编写js代码，但是离开后脚本不会停止。我有一个计时器，所以会有两个计时器比赛。

编辑2：我已上传页面：

main.html http://pastebin.com/0Y9Xfrtw

recharge.html http://pastebin.com/j9HfUvqZ

recharge.js http://pastebin.com/K5eCwMAb

- liuyanghejerry

jQuery Mobile？嗯... - 在哪个浏览器中？无论如何，尝试阅读这篇文章https://dev59.com/8HE95IYBdhLWcg3wRLst - c69

@c69 ready() 函数在 jQuery Mobile 中并不推荐使用，而是建议使用 pageInit() 函数，但对我来说并不起作用... - liuyanghejerry

它是否出现任何错误？还是只是“什么也没有发生”？ - c69

如果将它们放在<head>标签中，它们不会起作用，因为<head>标签不会被加载，而将它们放在<body>标签中，它们不会停止工作，所以当页面切换时，脚本会竞争。 - liuyanghejerry

@c69 我已经将页面上传到 Pastebin。请查看我的最后一次编辑。 - liuyanghejerry

@Naning 我尝试过了，但加载时也会运行多次。我查看了http://jquerymobile.com/test/docs/pages/page-navmodel.html，但它没有给出一个好的解决方案。 - liuyanghejerry

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Phill Pafford · Accepted Answer

更新#2：

http://jsfiddle.net/QgSaw/9/

尝试在页面转换之前停止计时器。由于您使用了多个页面，我不确定当导航到其他位置时计时器是否停止。请尝试测试不同的页面转换事件：

http://jquerymobile.com/demos/1.0rc2/docs/api/events.html

在上面的示例中，我使用了：

pagebeforehide

更新：

我尝试将您的代码从PasteBin中添加到JSFiddle中。

http://jsfiddle.net/QgSaw/3/

我认为这是有效的，因为我可以看到充电页面上的计时器倒计时，如果它归零则返回主页：

http://jsfiddle.net/QgSaw/4/（带有计时器js，但应该在它自己的文件中）

我在此方法上遇到了错误：

无法捕获的类型错误：对象[object Object]没有“everyTime”方法

取代everyTime的方法：

jquery "everyTime"函数

在jQM中，所有JavaScript（针对每个页面）都应该位于首先加载的页面中。因此，如果您加载index.html，请将所有JavaScript放置在此页面中。要执行特定页面的JavaScript，可以使用其中一个页面初始化事件，文档：

http://jquerymobile.com/demos/1.0rc2/docs/api/events.html

JS

$('#page_id').live( 'pageshow',function(event, ui){
    alert( 'This page was just hidden: '+ ui.prevPage);
});

Example:

http://jsfiddle.net/QgSaw/

JS

$('#home').live( 'pageshow',function(event, ui){
    alert( 'We are back home');
});

$('#page2').live( 'pageshow',function(event, ui){
    alert( 'This will only execute on Page 2');
});

HTML

<div data-role="page" id="home">
    <div data-role="content">

        <ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="f">
            <li data-role="list-divider">Overview</li>
            <li><a href="#page2">Page 2</a></li>
        </ul>

    </div>
</div>

<div data-role="page" id="page2">
    <div data-role="content">

        <ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="f">
            <li data-role="list-divider">Overview</li>
            <li><a href="#home">Go Back Home</a></li>
        </ul>

    </div>
</div>