无法从.xhtml文件扩展名运行JavaScript；适用于.html [英] Unable to run JavaScript from .xhtml file extension; works on .html

查看：82 发布时间：2020/11/24 6:12:37 javascript html xhtml

本文介绍了无法从.xhtml文件扩展名运行JavaScript；适用于.html的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我无法从xhtml文件中运行基本的JavaScript函数，例如alert等.请查看下面的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函数?

解决方案

扩展名为.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">.
从displayAlert()中删除<![CDATA[和]]>，并将它们放在script标记之后/之前作为注释(//):
```
<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>

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.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>

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?

解决方案

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 comments (//):
```
<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.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>

这篇关于无法从.xhtml文件扩展名运行JavaScript；适用于.html的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文

无法从.xhtml文件扩展名运行JavaScript；适用于.html [英] Unable to run JavaScript from .xhtml file extension; works on .html

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录关闭

无法从.xhtml文件扩展名运行JavaScript；适用于.html [英] Unable to run JavaScript from .xhtml file extension; works on .html

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录 关闭

登录关闭