0

当我使用 android 的 webview 时，我的 javascript 似乎根本没有加载，但在桌面浏览器上加载正常

这是我在一个 html 文件下的 html 和脚本：

<script>

function initialiseFields(){
    var name = "John Smith";
    var staffId = "9877878";
    alert( 'initialiseFields' );

    $("#list").append('<li><h3>Additional Information:</h3><div data-role="fieldcontain"><input type="text" name="claimTitle" id=/"textFieldJourneyFrom" value="" /></div></li>');

    $('#list').listview('refresh');  
}

</script>



<body onLoad="initialiseFields();">
    <div data-role="content">
        <ul class="ui-li" data-role="listview" id="list" data-inset="true"  data-scroll="true">
        </ul>
</body>

基本上试图执行显示警报的initialiseFields并将一些字段添加到listView中。

警报和 listView 永远不会被调用/更新。

编辑：另外，无论我通过 javascript 添加什么列表项，它都不会应用默认的 jquery 移动 css 样式。有什么理由吗？

另一个编辑：

解决方案由我已接受答案的人提供，但有一句警告。如果您使用的是日期选择器及其资产。提供的解决方案不起作用，即由于某些奇怪的原因它不会加载您的 JS：

<link href="jQueryAssets/jquery.ui.core.min.css" rel="stylesheet" type="text/css">
<link href="jQueryAssets/jquery.ui.theme.min.css" rel="stylesheet" type="text/css">
<link href="jQueryAssets/jquery.ui.datepicker.min.css" rel="stylesheet" type="text/css">
<link href="jQueryAssets/jquery.ui.button.min.css" rel="stylesheet" type="text/css">.

此外，我通过简单地设置主题尝试了上面的代码片段，它设法将主题应用于文本、标题和背景，但在实际字段上它并没有将其应用于输入字段

$("#list").append('<li data-theme="c"><h3>Additional Information:</h3><div data-role="fieldcontain" data-theme="c"><input type="text" name="information" id=/"textFieldInformation value="" data-theme="c"/></div></li>');

编辑2：

除了输入字段的主题之外，代码已经过测试并且工作正常，但是，我的 JS 在 android 设备上根本不起作用。

4

1 回答 1

2

使用 jQuery Mobile 时不要使用内联 javascript 函数初始化。主要是因为这个问题可能会发生。

jQuery Mobile 页面不是一个普通的网页。与经典的 Web 开发不同，jQuery Mobile 会在初始加载到 DOM 时重新设置整个页面的样式。这将在桌面浏览器上快速运行，但在移动浏览器/网络视图上运行需要时间（无论是 Android 还是 iOS）。因为这种重新样式化需要时间，所以这个内联函数将在 DOM 内的内容完全加载/增强之前执行。这也是文档就绪不应该与 jQuery Mobile 一起使用的一个原因，因为它通常会在它有用之前触发。

要解决这个问题，您应该使用 jQuery Mobile 页面事件。它们是专门为覆盖从初始 DOM 加载到最终页面显示的页面加载状态而创建的。

但要使其正常工作，您需要稍微更改您的 HTML。你的 divdata-role="content"必须被包装成一个带有属性的 div data-role="page"，像这样：

<body>
    <div data-role="page" id="index">    
        <div data-role="content">
            <ul class="ui-li" data-role="listview" id="list" data-inset="true"  data-scroll="true">

            </ul>
        </div>
    </div>        
</body>

要使页面事件正常工作，您的 Web 应用程序必须具有 data-role="page" div。此外，您的data-role="page"div 必须具有 id，我们将使用此 id 来初始化您的函数。

现在要让它工作，只需像这样初始化你的函数：

$(document).on('pagebeforeshow', '#index', function(){ 
    initialiseFields();
});

如果你想了解更多关于页面事件的信息，请阅读这篇文章，为了透明，这是我的个人博客。最后一件事，您需要了解 jQuery Mobile 如何处理多个页面和 javascript 初始化，因此请在此处了解更多信息。

你可以在这里测试它：http: //jsfiddle.net/qhvne/2/embedded/result/

于 2013-07-12T11:13:34.327 回答