Question

我正在构建一个使用现有移动网络应用程序的网页浏览的Android应用程序。现有的移动网络应用程序有一个标题图形和一个使用无序列表的页脚导航。

由于Android应用程序具有本机导航和已在应用程序中内置的标题，因此在使用移动Web应用程序中的页面的webview时，Web应用程序页眉和页脚在Android应用程序中是多余的。由于移动网络应用程序将用于blackberrys和windows phone等设备，我无法普遍删除页眉和页脚。此外，网络应用程序标题使用一些CSS，所以我需要确保移动网络应用程序在那里。

所以我决定尝试使用javascript来检测android OS，当它检测到android OS时动态地为页眉和页脚div分配一个类名，并在CSS中引用类名来不显示这些div。如果操作系统不是android，那么它将创建指向移动Web应用程序中标题所需的CSS文件的样式指针。

我不是javascript或CSS专家，所以我想出了一个简单的测试，以确保这一切都有效。一切正常，除了它似乎没有将类名分配给div，因为它在检测到android OS时不会显示。我知道它正在检测Android操作系统，因为我在if语句中有一个警报并且有效。我无法弄清楚我哪里出错了。我在使用Android 4.4和Chrome的Google Nexus 7上测试了这个，在使用Chrome的Android 4.1下安装了摩托罗拉RAZR Droid。

测试代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<style>
.android
{
    display:none;
}
</style>

<script language="javascript" type="text/javascript">

var isMobile = {
    Android: function() {
        return navigator.userAgent.match(/Android/i);
    }
};

var divID = "test";

var newClassName = "android";

function changeClass() {

var divReference = document.getElementById(divID);

divReference.className = newClassName;

};

if( isMobile.Android() ) 
    {
        alert("android!");
        changeClass();

}
else
{
    alert("Not android!");
    document.write("<link rel='stylesheet' href='header.css' type='text/css'>");
}

</script>





<title>Untitled Document</title>
</head>

<body>
<h1>Detect android device and hide second UL list below. If not android device, then hide   the first UL list.</h1>
<div class="notandroid">
<ul>
<li>One</li>
<li>two</li>
<li>three</li>
</ul>
</div>
<h2>This header is after the first UL list</h2>

<div id="test">
<ul>
<li>four</li>
<li>five</li>
<li>six</li>
</ul>
</div>
<h2>This header is after the second UL list</h2>

</body>
</html>

Answer 1

尝试将脚本标记放在正文的底部。运行脚本时div不存在。浏览器在遇到脚本标记时会立即解析并运行javascript - 所以你需要在DOM准备就绪后运行javascript。

Answer 2

您正在尝试changeClass()之前调用的元素之前调用document.getElementById()。将代码放在onload = function(){/*in here*/}中，或将脚本标记放在身体的底部。简而言之，必须先创建HTML，然后才能使用JavaScript。此外，XHTML不支持document.write()。 http://www.w3.org/MarkUp/2004/xhtml-faq#docwrite

Answer 3

避免浏览器检测有很多充分的理由。但是如果你决定继续这样做，那么你遇到的主要问题是这个代码在HEAD中运行，但是你正在寻找的DIV还没有存在，因为它在体内。如果你想在HEAD中使用document.write CSS，你可能需要在两个块中执行此操作。

javascript className函数的问题

3 个答案: