2

alertxhtml ファイル内からなどの基本的な 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 タイプを 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[と]]>を削除し、タグdisplayAlert()の直後/直前にコメント ( )として配置します。script//

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

  • 最後に、onClickXHTML には属性がありません。それらはonclick（すべて小文字）です。だからあなたのでそれらを変更してくださいinput。

  • すべてが有効になるように、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 をロードすると、エラーが発生したことは何も表示されませんが、Web ページに「world」という単語が表示されません。

しかし、ファイル拡張子を .html に変更するだけで、Firefox はページを完全にロードします (「hello world」というテキストが表示されます)。

どうしたの？

于 2016-06-09T14:15:13.260 に答える