2

我无法alert从 xhtml 文件中运行基本的 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 函数？

4

2 回答 2

8

通过.xhtml扩展，Chrome (WebKit) 将假定媒体类型为application/xhtml+xml. 使用.html，媒体类型为text/html。

现在application/xhtml+xml比text/html您的文件具有无效标记要灵活得多。当处理为text/html时，浏览器运行良好。当类型是application/xhtml+xml时，它不是那么温和。

简而言之，.xhtml您必须使文件有效才能工作。其中有很多错误（你可以稍后在这里检查它们），必要的是：

  • 将 更改<script language="javascript"> 为 <script type="text/javascript">。

  • 删除<![CDATA[and并将它们放在标签之后/之前]]>作为注释（）：displayAlert()script//

    <script type="text/javascript">
//<![CDATA[
...
//]]>
</script>

  • 最后，XHTML 没有onClick属性。它们是onclick（全部小写）。所以在你input的 s.

  • 就这样一切都有效，将inputs 包装在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>
于 2013-06-23T07:33:25.917 回答
1

acdcjunior 指出 Sriram 的原始 .xhtml 文件是无效的。从 Sriram 的肯定回答中，我推测纠正他的语法解决了他的问题。

然而，我在下面给出了一个示例，其中一个完全有效的 .xhtml 文件无法执行如果我将其扩展名更改为 .html 时立即工作的 javascript。

考虑这个简单的文件，我将其命名为 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（当前最新的 prd 版本，47.0）中加载 hello.xhtml 时，它什么也没说有错误，但是，它无法在网页中显示单词“world”。

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

这是怎么回事？

于 2016-06-09T14:15:13.260 回答