65.9K
CodeProject 正在变化。 阅读更多。
Home

JavaScript 控制台 -浏览器的 DOS 式控制台

Daniel Flower
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.53/5 (9投票s)

2008 年 3 月 15 日

CPOL

4分钟阅读

viewsIcon

63771

downloadIcon

742

提供了一个控制台窗口的源代码，允许在固定大小的 HTML 元素上进行打印和输入操作

引言

最近我需要一个可以在浏览器中使用 JavaScript 操作的类 DOS 控制台。具体来说，我需要一个具有固定行数和列数的“窗口”，可以向其中打印文本。文本会在每行末尾自动换行，当到达屏幕底部时，所有文本会向上滚动一行。

最后，我需要它能够请求并打印用户输入，允许在指定的行和列进行打印，并允许清屏。基本上，我需要重现 Commodore 64 的 Shell。本文提供了 JavaScript 源代码以及在网页上使用的控制台示例。

演示

点击 这里 查看控制台的实际效果。

Using the Code

第一步是声明一个 HTML 控件来容纳控制台

<div id="console"></div>

添加一些样式会更好。首先，固定宽度的字体是高度期望的，并且向左浮动意味着控件的宽度仅为其需要的大小。以下代码将控制台 div 设置为看起来像 DOS 提示符

<div id="console" style="font-family: Courier;
background-color: Black; color: White;
display:block; float:left;"></div>

下一步是在您的 JavaScript 中创建一个 Console 对象，指定您想要的行数和列数

var console = new Console('console' /* div id */,
5 /* rows */, 10 /* cols */);

现在您可以向其中打印文本和行了

console.println("Hello world");
console.print("Why does Batman drive the batmobile? ");
console.print("Because it's his car.");

这将产生以下输出：

HelloWorldDemo.jpg

现在如果我们多打印一些内容，第一行就会从顶部消失

HelloWorld2Demo.jpg

我们还可以从用户那里获取一些输入

console.cls(); // clear the screen
var userName = console.input('What is your name?');
console.println('Hello ' + userName);

Input.jpg

这是“无为什么”

必须说，我发现自己需要这样一个脚本的情况确实很特殊，我忍不住想知道是否有人能找到这样的解决方案的问题。尽管如此，解决了一些对不同类型脚本可能有帮助的问题。

解决 Internet Explorer 7 中被屏蔽的 window.prompt

window.prompt 是一个 JavaScript 方法，用于请求用户输入，并且 JavaScript 会阻塞直到用户响应（即，它是一个模态提示）。令人难以置信的是，Microsoft 在 Internet Explorer 7 中破坏了此功能，导致数百万脚本失效（除非在首选项中的某个地方启用它）。已经提出了许多修复方法，通常使用 DHTML 弹出窗口，并为用户输入内容时指定一个函数回调。

然而，我确实需要脚本在用户输入内容之前一直阻塞。幸运的是，Microsoft 引入了一个非标准的功能，可以打开一个模态窗口。您必须为该窗口提供要显示的网页的 URL。该页面包含一个输入文本框和一个按钮，点击该按钮会将输入文本发送回打开的窗口。因为我们可以假定只有 Internet Explorer 会禁用 window.prompt，所以我们可以安全地假定以下函数可以在大多数人的浏览器中获取用户输入

function getInput(message) {
  if (window.showModalDialog) {
    return window.showModalDialog("PromptWindow.htm", message,
                "dialogWidth:300px;dialogHeight:200px");
  } else {
    return prompt(message);
  }
}

在 Firefox 和其他非 Internet Explorer 浏览器中，您将看到标准的 JavaScript 提示

Window.prompt.jpg

在 Internet Explorer 中，您将看到自定义窗口

ShowModalDialog.jpg

如果您需要使用 Console.input 方法，那么您还需要在构造函数中将提示窗口的 URL 传递进去

var console = new Console('console',
10, 30, 'PromptWindow.htm');

无论哪种情况，JavaScript 的下一行代码都不会执行，直到用户提供响应。

从 JavaScript 向 pre 标签添加文本

控制台依赖于 pre 样式来处理空格，以便打印多个空格而不是像普通 HTML 那样被修剪。首先要注意的是，如果您有一个 <pre> 标签，或者像控制台那样，element.style.whiteSpace 属性设置为 pre，并且您将 element.innerHTML 设置为 ' '，例如，那么这可能会被修剪为单个空格，具体取决于浏览器。在这种情况下，您必须使用 document.createTextNode(' ')，然后将其附加到元素。对于控制台，每个行都引用一个 TextNode，并通过访问每个 TextNode 的 data 属性来操作控制台中的文本。

下一个问题是换行符。理论上，您不需要在 <pre> 标签中使用 <br> 标签。然而，在动态分配文本时，这会成为一个问题。如果您在文本后面附加 \n，Firefox 会添加一个换行符，但 Internet Explorer 不会。如果您附加 \r\n，Internet Explorer 会添加一个新行，而 Firefox 会添加两个。这就是我放弃的地方，我只是将 document.createElement('br') 附加到 <pre> 标签，这在所有浏览器上都可以工作。

兼容性和未来增强

我在 Windows 上使用 Internet Explorer 6、Internet Explorer 7、Firefox 2、Opera 9 和 Safari 3 对控制台进行了测试。未来，可能会添加指定字体和背景颜色的功能。就是这样。

历史

  • 2008 年 3 月 15 日：首次发布
© . All rights reserved.