admin管理员组

文章数量:1344238

I am unable to run basic javascript functions like alert etc. from within an xhtml file. Please see the xhtml file below: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
 ".dtd"> 
<html xmlns="" 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>

None of the functions (like ChangeColor etc.) work when rendered on Chrome/Safari browser. Renaming the same file to *.html results in all the functions working. I have read a lot of material which has caused me to:
1. Try the CDATA tag and put everything in the function into it.
2. Change the mime-type to text/html.

All of this to no avail. Can anyone tell me why this is happening and how I can run javascript functions from within xhtml?

I am unable to run basic javascript functions like alert etc. from within an xhtml file. Please see the xhtml file below: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
 "http://www.w3/TR/xhtml11/DTD/xhtml11.dtd"> 
<html xmlns="http://www.w3/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>

None of the functions (like ChangeColor etc.) work when rendered on Chrome/Safari browser. Renaming the same file to *.html results in all the functions working. I have read a lot of material which has caused me to:
1. Try the CDATA tag and put everything in the function into it.
2. Change the mime-type to text/html.

All of this to no avail. Can anyone tell me why this is happening and how I can run javascript functions from within xhtml?

  • javascript
  • html
  • xhtml
Share Improve this question edited Jun 23, 2013 at 7:07 BoltClock 725k165 gold badges1.4k silver badges1.4k bronze badges asked Jun 23, 2013 at 6:44 SriramSriram 10.6k21 gold badges87 silver badges141 bronze badges 3
  • 1 .html is the extension for xhtml. – Lidor Commented Jun 23, 2013 at 6:52
  • 1 If your Content-Type header is correct, then the file extension is meaningless, and your assumption as to what the problem is is incorrect. This probably means that when you use the file extension .xhtml, your Content-Type header is incorrect. – Brad Commented Jun 23, 2013 at 6:59
  • @Lidor: So is .xhtml. – BoltClock Commented Jun 23, 2013 at 7:02
Add a ment  | 

2 Answers 2

Reset to default 10

With .xhtml extension, Chrome (WebKit) will assume the media type as application/xhtml+xml. With .html, the media type is text/html.

Now application/xhtml+xml is a lot less flexible than text/html and your file has invalid markup. When processed as text/html, the browser plays nice. When the type is application/xhtml+xml, it's not so gentle.

To put it shortly, to work as .xhtml you have to make your file valid. There are a lot of mistakes in it (you may check them later here), the necessary are:

  • Change the <script language="javascript"> to <script type="text/javascript">.

  • Remove the <![CDATA[ and ]]> from displayAlert() and place them right after/before the script tags as ments (//):

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

  • Finally, there are no onClick attributes for XHTML. They are onclick (all lowercase). So change them in your inputs.

  • Just so everything is valid, wrap the inputs in a div tag.

Final XHTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
 "http://www.w3/TR/xhtml11/DTD/xhtml11.dtd"> 
<html xmlns="http://www.w3/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>

acdcjunior pointed out that Sriram's original .xhtml file is invalid. From Sriram's affirmative response, I gather that correcting his syntax solved his problem.

I, however, present below an example where a perfectly valid .xhtml file fails to execute javascript that instantly works if I change its extension to .html.

Consider this simple file, which I named hello.xhtml:

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

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

<html xmlns="http://www.w3/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>

It wants to execute this javascript file, named world.js:

document.write(' world');

I first note that hello.xhtml validates perfectly on https://validator.w3/, so I do not think there is any syntax error.

However, when I load hello.xhtml in Firefox (the current latest prd release, 47.0), it says nothing about there being an error, however, it fails to display the word "world" in the web page.

But if I merely change the file extension to .html, then Firefox loads the page perfectly (the text "hello world" appears).

What's going on?

本文标签： Unable to run JavaScript from xhtml file extension works on htmlStack Overflow

版权声明：本文标题：Unable to run JavaScript from .xhtml file extension; works on .html - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1743736356a2530083.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。