Java Applet 的“等待加载”消息

Glenn S. Peffers

3.46/5 (9投票s)

2000年5月25日

154783

一篇文章，描述了在 Java Applet 加载时显示消息（例如“请稍候...”）的 JavaScript 代码。这段代码设计为在 IE 和 Netscape 中都能正常工作。

引言

你是否希望用一条消息替换 Java Applet 加载时显示的难看的灰色框？以下代码为 IE 和 Netscape 提供了解决方案。更详细的描述在代码之后。

  <html>
    <head>
      <title>Your Title Here</title>
    </head>

    <script language="JavaScript">

      <!-- Hide script from old browsers

      function init()
      {
        // Microsoft Internet Explorer
        if (document.all)
        {
          document.all.loading.style.visibility="hidden";
          document.all.myapplet.style.visibility="visible";
          document.applets[0].repaint();
        }
        // Netscape Navigator
        else
        {
          document.loading.visibility="hide";
          document.myapplet.visibility="visible";
        }
      }

      // -->
    </script>

    <style type="text/css">

      #loading {
        position:absolute;
        left:150;
        top:200;
      }

      #myapplet {
        position:absolute;
        left:10;
        top:10;
        visibility:hide;
      }

    </style>

    <body onLoad="init()">

      <div id="loading">
        <p>Please wait while Java applet loads...</p>
      </div>

      <div id="myapplet" style="visibility:hidden">
        <applet archive="app1.jar" code="app1.class" align="baseline" width="620" height="442">
          <p>Requires a browser that supports Java.</p>
        </applet>
      </div>

    </body>
  </html>

解决方案详解

首先，让我们解释一下我们试图在这里做什么。我们希望在 Applet 加载时显示一条消息，例如“Java Applet 正在加载，请稍候...”。这条消息应该出现在 Applet 将要占据的空间中，然后在 Applet 加载完成后被 Applet 替换。

上述代码做了很多事情来实现这一点。

在网页中创建了两个 <div> 区域。第一个包含在 Applet 加载时要显示的文本（或图像）。第二个包含加载 Applet 的 <applet> 标签。这个第二个 <div> 的 visibility 样式被设置为隐藏。这是 IE 所必需的。

      <div id="loading">
        <p>Please wait while Java applet loads...</p>
      </div>

      <div id="myapplet" style="visibility:hidden">
        <applet archive="app1.jar" code="app1.class" align="baseline" width="620" height="442">
        <p>Requires a browser that supports Java.</p>
      </applet>
      </div>

为这两个 <div> 标签定义了样式表。它们都需要定位样式。包含 <applet> 标签的 <div> 的样式表还需要将 visibility 设置为隐藏（这是为 Netscape 准备的）。定位需要根据 Applet 的位置进行自定义，这不是一个通用的解决方案。

    <style type="text/css">

      #loading {
        position:absolute;
        left:150;
        top:200;
      }

      #myapplet {
        position:absolute;
        left:10;
        top:10;
        visibility:hide;
      }

    </style>

定义了一个 JavaScript 函数，该函数在页面加载时运行（<body onLoad="init()">）。简单来说，这个函数隐藏包含消息的 <div> 并显示包含 Applet 的 <div>。

    <script language="JavaScript">

      function init()
      {
        if (document.all)
        {
          document.all.loading.style.visibility="hidden";
          document.all.myapplet.style.visibility="visible";
          document.applets[0].repaint();
        }
        else
        {
          document.loading.visibility="hide";
          document.myapplet.visibility="visible";
        }
      }

    </script>

这种方法同样适用于在 Applet 加载时将图像“覆盖”在 Applet 上。