Question

我无法在xhtml文件中运行alert等基本的javascript函数。请参阅下面的xhtml文件：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
 "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta content="text/html;charset=UTF-8" />
<title>My HTML</title>
</head>
<body>
<h1>MyHTML</h1>
<p id="mytext">Hello World! This is a test.</p>
<input type="button" value="Alert" onClick="displayAlert()" />
<input type="button" value="Say hello" onClick="showAndroidToast('Hello Android!')" />
<input type="button" value="Open Dialog" onClick="openAndroidDialog()" />
<input type="button" value="Add highlight" onClick="changeColor()" />

<script language="javascript">
   function showAndroidToast(toast) {
       JSInterface.showToast(toast);
   }

   function openAndroidDialog() {
       JSInterface.openAndroidDialog();
   }

   function callFromActivity(msg) {
        alert(msg);
        var oldHTML = document.getElementById("mytext");
        alert(oldHTML);
        var newHTML = "<span style='color:#ff0000'>" + msg + "</span>";
        alert(newHTML);
        document.getElementById("mytext").innerHTML = newHTML;
   }

   function changeColor() {
        var oldHTML = document.getElementById("mytext").innerHTML;
        var newHTML = "<span style='color:#ff0000'>" + oldHTML + "</span>";
        document.getElementById("mytext").innerHTML = newHTML;
   }

   function displayAlert() {
        <![CDATA[
        window.alert("I am here!");
        ]]>
    }

</script>

</body>
</html>

在Chrome / Safari浏览器上呈现时，所有功能（如ChangeColor等）均无效。将同一文件重命名为*.html会导致所有功能正常工作。我读过很多让我发现的材料：
1.尝试CDATA标记，并将函数中的所有内容放入其中 2.将mime-type更改为text / html。

所有这一切都无济于事。任何人都可以告诉我为什么会发生这种情况以及我如何在xhtml中运行javascript函数？

Answer 1

通过.xhtml扩展程序，Chrome（WebKit）会将媒体类型视为application/xhtml+xml。使用.html时，媒体类型为text/html。

现在application/xhtml+xml的灵活性远低于text/html，而且您的文件标记无效。处理为text/html时，浏览器效果很好。当类型为application/xhtml+xml时，它不是那么温和。

简而言之，要以.xhtml工作，您必须使文件有效。它有很多错误（您可以稍后查看here），必要的是：

将<script language="javascript">更改为<script type="text/javascript">。
从<![CDATA[移除]]>和displayAlert()，并将其放在script标记之后/之前作为评论（//）：< / p>
```
<script type="text/javascript">
//<![CDATA[
...
//]]>
</script>
```
最后，XHTML没有onClick属性。它们是onclick（全部小写）。因此，请在input s。
只要一切都有效，请将input标记在div标记中。

最终的XHTML：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
 "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta content="text/html;charset=UTF-8" />
<title>My HTML</title>
</head>
<body>
<h1>MyHTML</h1>
<p id="mytext">Hello World! This is a test.</p>
<div>
<input type="button" value="Alert" onclick="displayAlert()" />
<input type="button" value="Say hello" onclick="showAndroidToast('Hello Android!')" />
<input type="button" value="Open Dialog" onclick="openAndroidDialog()" />
<input type="button" value="Add highlight" onclick="changeColor()" />
</div>
<script type="text/javascript">
//<![CDATA[
   function showAndroidToast(toast) {
       JSInterface.showToast(toast);
   }

   function openAndroidDialog() {
       JSInterface.openAndroidDialog();
   }

   function callFromActivity(msg) {
        alert(msg);
        var oldHTML = document.getElementById("mytext");
        alert(oldHTML);
        var newHTML = "<span style='color:#ff0000'>" + msg + "</span>";
        alert(newHTML);
        document.getElementById("mytext").innerHTML = newHTML;
   }

   function changeColor() {
        var oldHTML = document.getElementById("mytext").innerHTML;
        var newHTML = "<span style='color:#ff0000'>" + oldHTML + "</span>";
        document.getElementById("mytext").innerHTML = newHTML;
   }

   function displayAlert() {

        window.alert("I am here!");

    }
//]]>
</script>

</body>
</html>

Answer 2

acdcjunior指出，Sriram的原始.xhtml文件无效。根据斯里兰姆的肯定回应，我认为纠正他的语法解决了他的问题。

然而，我在一个例子中提供了一个完全有效的.xhtml文件无法执行javascript的示例，如果我将其扩展名更改为.html，它将立即生效。

考虑这个简单的文件，我将其命名为hello.xhtml：

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <title>Hello world</title>
    </head>

    <body>
        <p>
            Hello
            <script type="text/javascript" src="./world.js"></script>
        </p>
    </body>
</html>

它想要执行这个名为world.js的javascript文件：

document.write(' world');

我首先注意到hello.xhtml在https://validator.w3.org/上完美验证，所以我认为没有任何语法错误。

但是，当我在Firefox中加载hello.xhtml（当前最新的prd版本，47.0）时，它没有说明存在错误，但是，它无法在网页中显示“world”一词。

但如果我只是将文件扩展名更改为.html，那么Firefox会完美地加载页面（显示“hello world”文本）。

发生了什么事？

无法从.xhtml文件扩展名运行JavaScript;适用于.html

2 个答案: