`
fanjf
  • 浏览: 333244 次
  • 性别: Icon_minigender_1
  • 来自: 安徽
社区版块
存档分类
最新评论

【精】js在jsp中的加载执行顺序

 
阅读更多

页面上的Javascript代码是HTML文档的一部分,所以Javascript在页面装载时执行的顺序就是其引入标记<script />的出现顺序, <script />标记里面的或者通过src引入的外部JS,都是按照其语句出现的顺序执行,而且执行过程是文档装载的一部分。

每个脚本定义的全局变量和函数,都可以被后面执行的脚本所调用。

 

(1) 变量的调用,必须是前面已经声明,否则获取的变量值是undefined。

————————————————————

<script type="text/javascript">

//<![CDATA[

alert(tmp);  //输出 undefined

var tmp = 1;

alert(tmp);  //输出 1

//]]>

</script>

————————————————————


(2)同一段脚本,函数定义可以出现在函数调用的后面,但是如果是分别在两段代码,且函数调用在第一段代码中,则会报函数未定义错误。

————————————————————

<script type="text/javascript">

aa();            //浏览器报错

</script>


<script type="text/javascript">

aa(); //输出 1

function aa(){

    alert(1);

}

</script>

————————————————————


(3)document.write()会把输出写入到脚本文档所在的位置,浏览器解析完documemt.write()所在文档内容后,继续解析document.write()输出的内容,然后在继续解析HTML文档。

————————————————————

<script type="text/javascript">

    document.write('<script type="text/javascript" src="test.js"><\/script>');

    document.write('<script type="text/javascript">');

    document.write('alert(2);');//输出2

    document.write('alert("我是" + tmpStr);'); //浏览器报错

    document.write('<\/script>');

</script>


<script type="text/javascript">

    alert(3);

</script>

————————————————————

test.js的内容是:

————————————————————

var tmpStr = 1;

alert(tmpStr);

————————————————————

在Firefox和Opera中的弹出值的顺序是:1、2、我是1、3

在IE中弹出值的顺序是:2、1、3,同时浏览器报错:tmpStr未定义

原因可能是IE在document.write时,并未等待加载SRC中的Javascript代码完毕后,才执行下一行,所以导致2先弹出,并且执行到


document.write(’document.write("我是" + tmpStr)’)调用tmpStr时,tmpStr并未定义,从而报错。


解决这个问题,可以利用HTML解析是解析完一个HTML标签,再执行下一个的原理(即把JS文件的通过单独的HTML<script> 标签首先引入,HTML会首先解析该标签元素),把代码拆分来实现:

————————————————————

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

    document.write('<script type="text/javascript" src="test.js"><\/script>');

    //]]>

</script>


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

    document.write('<script type="text/javascript">');

    document.write('alert(2);')

    document.write('alert("我是" + tmpStr);');

    document.write('<\/script>');

    //]]>

</script>


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

    alert(3);

    //]]>

</script>

————————————————————

这样IE下和其他浏览器输出值的顺序都是一直的了:1、2、我是1、3。


本文来自CSDN博客,转载请标明出处:http://blog.csdn.net/cnkiminzhuhu/archive/2008/01/28/2069560.aspx

分享到:
评论

相关推荐

    jsp页面中的代码执行加载顺序介绍.docx

    ### JSP页面中的代码执行加载顺序详解 #### 一、引言 JSP(Java Server Pages)是一种基于Java技术的动态网页技术标准,它通过将动态生成的内容嵌入到静态HTML页面中,使得Web应用程序能够生成动态变化的内容。在...

    jsp页面中的代码执行加载顺序介绍

    了解JSP页面中的代码执行加载顺序对于Web开发人员来说至关重要,因为它影响页面的表现和功能的实现。 JSP页面中的代码主要分为三部分:Java代码、JSP标签和脚本以及客户端的JavaScript和HTML代码。这些部分的执行...

    多种方法实现当jsp页面完全加载完成后执行一个js函数

    在网页开发中,有时我们需要确保页面完全加载后再执行某些JavaScript函数,这有助于保证操作的正确性和用户体验。在JSP页面中,实现这个需求有多种方式。以下将详细讲解标题和描述中提到的几种常见方法: 1. **使用...

    jsloader 异步加载js文件

    `JSLoader`就是这样一种工具,它允许开发者在JSP页面中异步地加载JS文件,提高页面性能。 ### 异步加载的优势 1. **提升性能**:异步加载可以确保页面主体内容先加载,用户可以更快地看到页面内容,提升用户体验。...

    JSP中调用js日期控件

    在JSP(JavaServer Pages)开发中,为了增强用户体验,我们常常会使用JavaScript日期控件来帮助用户方便地选择日期。这些控件不仅简化了日期输入的过程,而且提供了丰富的自定义选项,使得网页的交互性更强。本篇将...

    关于JS和html代码的执行先后问题

    在JavaScript和HTML的交互中,理解它们的执行顺序是至关重要的。这涉及到浏览器解析网页时的渲染流程,以及JavaScript如何与HTML元素进行交互。本文将深入探讨这些知识点。 首先,我们要明白HTML文档的加载过程。当...

    javascript合并压缩的jsp tag实现

    在网页开发中,通常会有多份 JavaScript 文件,每份文件都对应一个网络请求,这会增加页面加载时间。通过合并和压缩这些文件,可以将它们整合成一个更小的文件,从而降低页面的加载时间。 首先,让我们了解一下什么...

    解析web(asp)网页的执行顺序.pdf

    本文主要探讨了ASP网页中脚本的执行流程,以及JavaScript在页面加载时的行为。 首先,一个ASP网页通常由三大部分组成:脚本、HTML标记语言和CSS样式表。脚本分为服务器端脚本和客户端脚本。服务器端脚本,如`...

    解析web(asp)网页的执行顺序.docx

    例如,`&lt;script&gt;`标签内的代码和通过`&lt;script src="..."&gt;`引入的外部JS文件会在页面加载过程中按顺序执行。 - 客户端脚本能访问和操作DOM(Document Object Model),改变页面元素的样式、内容等,而服务器端脚本...

    调用内部JS和外部JS的演示程序

    外部JS的引用可以确保页面加载时执行脚本,且脚本只加载一次,即使在多个页面中重复引用。 **优化:延迟加载和异步加载** 为了提高页面加载速度,我们可以使用`defer`和`async`属性来控制外部JS的加载方式。`defer`...

    xmlStr.js工具bpmn配合vue开发jsp格式文件

    XMLStr.js是一个JavaScript工具,主要用于处理XML字符串,它在与BPMN(Business Process Model and Notation)结合使用时,可以极大地提升在Vue.js框架下开发JSP格式文件的效率和便捷性。BPMN是一种国际标准的业务...

    jsp和javascript写的无刷新聊天室及源代码

    在NetBeans中,开发者可以方便地管理项目文件,编写JSP和JavaScript代码,并进行调试。ChatSystem这个文件夹很可能是项目的源代码目录,包含了JSP文件、JavaScript文件、可能还有CSS样式表和其他资源文件。 这个...

    jsp页面使用My97DatePicker日历控件就经常出现无法打开站点

    2. **文件加载问题**:My97DatePicker的JavaScript和CSS文件可能没有正确地加载到页面中。这可能是由于URL错误、路径不正确或者文件未上传至服务器导致的。开发者需要检查HTML代码中引用的资源路径是否正确,并确保...

    jsp+ajax发送GET请求的方法

    为了保证代码的执行顺序,通常在页面完全加载完成后才会执行JavaScript代码,以确保DOM元素已经加载,从而能够正确地绑定事件处理器。 在整个过程中,我们需要注意的是Ajax请求是异步进行的,它不会导致浏览器页面...

    在JavaScript应用中实现延迟加载的方法

    JavaScript延迟加载是一种优化Web应用程序性能的技术,特别是在大型项目中,它可以显著减少页面加载时间和网络带宽的消耗。本文将深入探讨如何使用RequireJS框架来实现JavaScript的延迟加载,并通过一个具体的示例...

    java web 入门源代码,包含servlet,jsp,filter等

    Filter链可以有多个,按照配置的顺序执行,这在权限控制、字符编码转换、日志记录等方面非常实用。在MyWebApp中,`LoggingFilter`可能用于记录每个请求的详细信息,而`EncodingFilter`则负责确保所有输入和输出都是...

    jsp 图片拖拽排序,img src自动改变

    在IT行业中,JSP(JavaServer Pages)是一种用于创建动态网页的技术,它允许开发者将HTML、CSS、JavaScript等与Java代码结合在一起,实现服务器端的编程。本话题聚焦于一个特定的应用场景:通过拖拽来排序图片,并在...

    jquery-easyui.rar_easyUI jsp_easyui jsp_easyui框架_jQuery.easyu

    `easyloader.js` 是jQuery EasyUI的一个加载脚本,它可以帮助优化组件的加载顺序,提高页面性能。`.project` 文件通常是Eclipse等IDE的项目配置文件,可能包含关于这个示例项目的设置信息。 总的来说,这个压缩包是...

    ie中 body onload 和 window onload 解决法案

    在网页开发中,`body.onload` 和 `window.onload` 是两个常见的JavaScript事件处理函数,用于在页面完全加载后执行...在实际项目中,根据需求选择合适的事件,或者结合使用,能够更好地控制页面的加载顺序和执行时机。

    javaScript嗅探执行神器-sniffer.js

    JavaScript嗅探执行神器-Sniffer.js是一个非常实用的工具,主要用于解决JavaScript代码中因文件加载顺序不正确导致的执行问题。在实际开发中,我们常常遇到动态生成的JavaScript代码尝试调用尚未加载完成的文件中...

Global site tag (gtag.js) - Google Analytics