Question

当我使用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>

基本上尝试执行显示警报的initialiseField并在listView中添加一些字段。

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

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

另一个编辑：

解决方案由我接受答案的人提供，但是请注明警告。如果您使用的是日期选择器及其资产。提供的soltuons不起作用，但它没有加载你的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设备上根本不起作用。

Answer 1

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

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

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

但为了使其工作，您需要稍微更改HTML。您的 data-role="content" div必须包含在具有 data-role="page" 属性的div中，如下所示：

<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>

要使网页活动正常运行，您的网络应用必须拥有data-role =“page”div。此外， data-role="page" div必须有ID，我们将使用此ID初始化您的函数。

现在让它工作就像这样初始化你的函数：

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

如果您想了解有关网页活动的更多信息，请阅读 ARTICLE ，为了保持透明，这是我的个人博客。最后一件事，你需要知道jQuery Mobile如何处理多个页面和javascript初始化，以便更多地了解它 HERE 。

您可以在此处进行测试：http://jsfiddle.net/qhvne/2/embedded/result/

未在onLoad中加载JavaScript（Android webView浏览器问题）

1 个答案: