`

js中使用document输出信息时，总是有进度条

    博客分类：
  • js
HTMLJavaScriptIEFirefoxWordPress 
阅读更多

 

关于document.write()方法

今天js中使用document输出信息时，总是有进度条，在网上找到了这篇文章，很有帮助

原来的代码：

<html>
    <body>
        <script>           
            var h = ‘<html><body>aaaaaaaaaaaa</body></html>’;

//注意这里 document.write();方法对字符串“<script>””</script>””</html>””</body>”极可能出现匹配或过滤错误，导致输出不正常，最好转义一下。
            h = h.replace("</","</");
            function a ()
            {               
                document.write(h);

       return false;
            }
        </script>
        <input type="button"  onclick ="a()" value = "Try me"/>
    </body>   
</html>

在firefox下，显示正常，但是进度条总显示正在加载。

后来发现是我忘了关闭document；

写到当前的文档： 

<html>

<head>
<title>write example</title>

<script type="text/javascript">

function newContent()
{
alert("load new content");
document.open();
document.write("<h1>Out with the old - in with the new!</h1>");
document.close();
}

</script>
</head>

<body onload="newContent();">
<p>Some original document content.</p>
</body>
</html>

写的新打开的文档，或者 iframe

<html>

<head>

<title>Write to IFRAME </title>

</head>

<body>

<iframe width="50%" height="100" id="iframe1" src=""></iframe>

<script language="JavaScript">

<!–

var str = ‘Hello I am sending this to <b>IFRAME</b>’;

// NO IE

if (!document.all) {

      var ifr1 = document.getElementById(‘iframe1′);

      ifr1.contentWindow.document.open();

      ifr1.contentWindow.document.write(str);

      ifr1.contentWindow.document.close();

}

// IE

else {

document.frames[0].document.open();

document.frames[0].document.write(str);

document.frames[0].document.close();

}

//–>

</script>

</body>

</html>

 

这里还有个比较复杂的例子等等研究一下

<html>

<head>

<title>Write to IFRAME </title>

</head>

<body>

<script language="javascript">

var txt="";

function handleErr(msg,url,l)

{

txt="There was an error on this page.nn"

txt+="Error: " + msg + "n"

txt+="URL: " + url + "n"

txt+="Line: " + l + "nn"

txt+="Click OK to continue.nn"

alert(txt)

return true

}

onerror=handleErr

function loadExternal(url) {

  var ifr1 = document.getElementById(‘srcFrame’);

  if (ifr1) {

      ifr1.contentWindow.document.location = url;

    //window.frames['srcFrame'].location  = url;

    return false;

  }

  return true;

}

function GetInnerHTML () {

      var str = null;

      if (!document.all) {

            var ifr1 = document.getElementById(‘srcFrame’);

                  str = ifr1.contentWindow.document.documentElement.innerHTML;

      }

      else {

                  str = window.frames['srcFrame'].document.body.innerHTML;            
      }

      return (str);

}

function displayExternal() {

      var str = GetInnerHTML ();

      if (!str) { alert (‘Could not read contents of source iframe’); return; }

      if (!document.all) {

            var ifr1 = document.getElementById(‘trgFrame’);

            ifr1.contentWindow.document.open();

            ifr1.contentWindow.document.write(str);

            ifr1.contentWindow.document.close();

      }

      // IE

      else {

            window.frames['trgFrame'].document.body.innerHTML = str;

            /*

            ifr1.document.open();

            ifr1.document.write(str);

            ifr1.document.close();

            */

      }

}

</script>

<br>SRC FRAME

<br><input type="button" value="Load Local Page" onclick="(loadExternal(‘file.htm’));">

<br><input type="button" value="Load Yahoo !" onclick="(loadExternal(‘http://www.yahoo.com’));">

<br><iframe width="50%" height="100" id="srcFrame" src=""></iframe>

<br>TRG FRAME

<br><input type="button" value="Update Target Page" onclick="displayExternal();">

<br><iframe width="50%" height="100" id="trgFrame" src=""></iframe>

<script language="JavaScript">

</script>

</body>

</html>

 

引文地址：http://www.chuan.shanghuo.net/wordpress/?p=165

分享到：
| mysql导出和导入txt数据
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    jsp实现的进度条范例

    在IT行业中，尤其是在Web开发领域，进度条是一个...进一步提升这个示例，可以学习如何在JSP中整合Java Servlet、数据库操作以及更复杂的前端框架，如Bootstrap或Vue.js，来创建功能更强大、用户体验更好的进度条组件。

    c# 进度条

    - 考虑到不同的浏览器可能对JavaScript的支持程度不同，需要确保进度条能够在各种现代浏览器中正常工作。 综上所述，本文档涉及的C# Web进度条实现不仅涵盖了基本的编程技巧，还涉及到了Web开发的多个方面，包括...

    用Progress控件实现文字进度条

    在Web开发中，可以使用JavaScript和HTML来实现文字进度条。以下是一个简单的HTML和JavaScript示例： ```html &lt;!DOCTYPE html&gt; 文字进度条 function updateProgress(progress) { document.getElementById('...

    asp.net 生成静态页时的进度条显示

    在后台代码中使用`Thread.Sleep(1000)`可以让线程暂停1秒钟。这对于模拟生成静态页的耗时非常有用。这种方法虽然简单，但可以在演示和开发阶段有效地展示进度条。 4. **客户端进度显示**： 在***中，可以在按钮的...

    php+javascript实现的动态显示服务器运行程序进度条功能示例

    在Web开发中，实现动态进度条能够增强用户体验，尤其是在执行后台任务时。该知识点主要介绍如何通过PHP和JavaScript组合来实现一个动态显示服务器端运行程序的进度条功能。以下为详细知识点阐述： ### PHP实现...

    JavaScript完全自学宝典 源代码

    \lib目录 在Java中使用JSON需要的lib包列表。 \testJson\src\jsonExercise\JSONServlet.java 处理页面请求的Servlet。 \testJson\src\jsonExercise\ComdtyBean.java 商品信息的POJO。 \testJson\Web...

    javascript完全学习手册1 源码

    1.3 在Web页面中使用JavaScript 5 1.3.1 HTML的基本结构 5 1.3.2 在HTML中嵌入JavaScript 7 1.3.3 链接JavaScript文件 9 1.4 编写JavaScript的工具 11 1.4.1 使用纯文本编辑器 11 1.4.2 使用专业化脚本编辑工具 13 ...

    javascript完全学习手册2 源码

    1．3 在web页面中使用JavaScript 1．3．1 HTML的基本结构 1．3．2 在HTML中嵌入JavaScript 1．3．3 链接JavaScript文件 1．4 编写JavaScript的工具 1．4．1 使用纯文本编辑器 1．4．2 使用专业化脚本编辑工具 ...

    javascript经典特效---文件大小的详细计算.rar

    8. **服务端通信**：在前后端交互时，通过Ajax或Fetch API发送文件，服务器返回的响应也可能包含文件大小信息，这有助于客户端进行错误处理和用户体验优化。 通过“javascript经典特效---文件大小的详细计算.htm”...

    带LODING显示下载

    为了模拟加载过程中的进度变化，使用JavaScript动态生成了多个进度条元素： ```javascript document.write(" &lt;br&gt; &lt;br&gt;&lt;table border=0 cellspacing=1 cellpadding=0 bgcolor=#000000&gt;&lt;tr bgcolor=#ffffff&gt;;'&gt;...

    jquery可控制调节进度条特效代码

    在本文中，我们将深入探讨如何使用jQuery来创建一个可控制调节的进度条特效。这个特效主要应用于项目步骤展示，允许用户点击进度条来调整进度，并显示当前的百分比进度。 首先，我们需要理解jQuery库的基本概念。...

    大名鼎鼎SWFUpload- Flash+JS 上传

    当Flash上传文件的时候，由开发人员预定义的Javascript事件会被定时触发以便来更新页面中的UI，同时还提供上传状态和错误信息。 选定的文件的上传和它所在页面、表单是独立的。每个文件都是单独上传的，这就保证了...

    jQuery实现的检测滚动条距离顶部百分比效果源码.zip

    在提供的压缩包中，"使用须知.txt"很可能是包含了关于如何使用这段源码的说明，而"132692137284042014"可能是一个JavaScript文件，里面包含了具体的实现代码。解压后，仔细阅读"使用须知.txt"，并查看这个JavaScript...

    javascrip上百技术总集

    外一篇 用javascript改变onclick调用的函数 用JavaScript加密保护...进度条 用javascript怎样实现图片模糊效果 《ExtJS2.0实用简明教程》之Border区域布局 《ExtJS2.0实用简明教程》之Ext类库简介 ...

    Android WebView播放视频（包括全屏播放）

    在Android应用开发中，WebView是一个非常重要的组件，它允许开发者在应用程序内嵌入网页内容，实现类似浏览器的功能。本文将详细讲解如何在Android的WebView中播放视频，包括全屏播放的实现方法。以下是对该主题的...

    Xpage学习笔记

    本笔记主要涵盖了在 Xpage 中使用 Dojo 框架以及相关的控件和操作技巧。 ### 1. Theme 主题 Xpage 支持多种主题，例如 Tundra，它们定义了界面的样式和布局。Tundra.css 是 Dojo Toolkit 中的一种基础样式，可以...

    HTML中audio相关操作

    可以使用JavaScript监听音频事件，如播放、暂停、结束等，以便实现交互功能： ```javascript var audio = document.querySelector('audio'); audio.addEventListener('play', function() { console.log('音频...

    利用时间戳获取间隔时间

    - 在Web开发中，可以使用JavaScript的`setInterval`或`setTimeout`函数定时更新UI。 6. **示例代码** - 以下是一个简单的JavaScript示例，用于在UI上显示两个时间戳之间的间隔： ```javascript let ...

    CountUp.js数字滚动插件使用方法详解

    在start方法调用之前，可以检查是否有错误，如果有错误，则通过console.error方法输出错误信息。 下面是一个具体的使用实例： ```html &lt;!DOCTYPE html&gt; &lt;title&gt;Document &lt;div id="box"&gt;&lt;/div&gt; ***"&gt; ...

    网页版-音乐播放器，可以下来玩玩

    这种播放器通常包含用户界面元素，如播放、暂停、前进、后退按钮，以及音量控制和进度条，使得用户能够在网页上方便地欣赏音乐。 在本项目中，"音乐播放器"是一个简单的网页应用，特别适合初学者进行实践。它由两...

Magicbox
Global site tag (gtag.js) - Google Analytics