`

Js中对外部js文件的引用顺序直接影响到未定义的问题

    博客分类:
  • js
阅读更多

一、在HTML中嵌入Javasript的方法
  直接在Javascript代码放在标记对<script>和</script>之间 
  由<script />标记的src属性制定外部的js文件 
  放在事件处理程序中,比如:<p onclick="alert('我是由onclick事件执行的Javascript')">点击我</p> 
  作为URL的主体,这个URL使用特殊的Javascript:协议,比如:<a href="javascript:alert('我是由javascript:协议执行的javascript')">点击我</a> 
  利用javascript本身的document.write()方法写入新的javascript代码 
  利用Ajax异步获取javascript代码,然后执行 
  第3种和第4种方法写入的Javascript需要触发才能执行,所以除非特别设置,否则页面加载时不会执行。
  二、Javascript在页面的执行顺序
  页面上的Javascript代码是HTML文档的一部分,所以Javascript在页面装载时执行的顺序就是其引入标记<script />的出现顺序, <script />标记里面的或者通过src引入的外部JS,都是按照其语句出现的顺序执行,而且执行过程是文档装载的一部分。 
  每个脚本定义的全局变量和函数,都可以被后面执行的脚本所调用。 
  变量的调用,必须是前面已经声明,否则获取的变量值是undefined。 
  <script type="text/javscrpt">//<![CDATA[
   alert(tmp); //输出 undefined
   var tmp = 1;
   alert(tmp); //输出 1
   //]]></script>
  同一段脚本,函数定义可以出现在函数调用的后面,但是如果是分别在两段代码,且函数调用在第一段代码中,则会报函数未定义错误。 
  <script type="text/javscrpt">//<![CDATA[
   aa(); //浏览器报错
   //]]></script>
   <script type="text/javscrpt">//<![CDATA[
   aa(); //输出 1 
   function aa(){alert(1);}
   //]]></script>
  document.write()会把输出写入到脚本文档所在的位置,浏览器解析完documemt.write()所在文档内容后,继续解析document.write()输出的内容,然后在继续解析HTML文档。 
  <script type="text/javascript">//<![CDATA[
   document.write('<script type="text/javascript" src="test.js"><\/script>');
   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>
  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标签,再执行下一个的原理,把代码拆分来实现:
  <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。 
  三、如何改变Javascript在页面的执行顺序
  利用onload 
  <script type="text/javascript">//<![CDATA[
   window.onload = f;
   function f(){alert(1);}
   alert(2);
   //]]></script>
  输出值顺序是 2、1。
  需要注意的是,如果存在多个winodws.onload的话,只有最有一个生效,解决这个办法是:
  window.onload = function(){f();f1();f2();.....}
  利用2级DOM事件类型
  if(document.addEventListener){
   window.addEventListener('load',f,false);
   window.addEventListener('load',f1,false);
   ...
   }else{
   window.attachEvent('onload',f);
   window.attachEvent('onload',f1);
   ...
   }
  IE中可以利用defer,defer作用是把代码加载下来,并不立即执行,等文档装载完毕之后再执行,有点类似window.onload,但是没有window.onload那样的局限性,可以重复使用,但是只在IE中有效,所以上面的例子可以修改成为 
  <script type="text/javascript">//<![CDATA[
   document.write('<script type="text/javascript" src="test.js"><\/script>');
   document.write('<script type="text/javascript" defer="defer">');
   document.write('alert(2);')
   document.write('alert("我是" + tmpStr);');
   document.write('<\/script>');
   //]]></script>
   <script type="text/javascript">//<![CDATA[
   alert(3);
   //]]></script>
  这样IE就不报错了,输出值的顺序变成:1、3、2、我是1
  当HTML解析器遇到一个脚本,它必须按常规终止对文档的解析并等待脚本执行。为了解决这个问题HTML4标准定义了defer。通过defer来提示浏览器可以继续解析HTML文档,并延迟执行脚本。这种延迟在脚本从外部文件载入时非常有用,让浏览器不必等待外部文件全部载入之后才继续执行,能有效的提高性能。IE是目前唯一支持defer属性的浏览器,但IE并没有正确的实现了defer属性,因为延迟的脚本总是被延迟,直到文档结束,而不是只延迟到下一个非延迟的脚本。这意味着,IE中延迟的脚本的执行顺序相当混乱,并且不能定义任何后面非延迟脚本并须的函数和变量。在IE中所有的defer的脚本执行时间应该都是HTML文档树建立以后,window.onload之前

分享到:
评论

相关推荐

    Javascript在页面加载时的执行顺序.docx

    2. **外部引用**:使用`&lt;script&gt;`标签的`src`属性指向.js文件,这种方式允许代码分离,提高页面加载效率。 3. **事件处理程序**:将JavaScript代码绑定到HTML元素的事件属性上,如`onclick`。 4. **URL主体**:使用`...

    2010html执行顺序.docx

    在给定的示例中,JavaScript的执行顺序是:`alert(1)`、`alert(2)`(来自外部文件`a.js`)、`alert(3)`,以及对`&lt;input id="a"&gt;`的操作。如果在`&lt;input&gt;`元素之上放置一个`&lt;script&gt;`标签来获取`id="a"`的元素,由于...

    2010html执行顺序.pdf

    首先,JavaScript可以直接写在`&lt;script&gt;`标签内,或者通过`&lt;script&gt;`标签的`src`属性引用外部JS文件。这两种方式都会按照它们在HTML文档中的出现顺序依次执行。例如,在`&lt;head&gt;`部分的脚本会先于`&lt;body&gt;`部分的脚本...

    Javascript代码在页面加载时的执行顺序介绍

    外部JavaScript文件的代码将按照文件中语句出现的顺序执行。 3. 将JavaScript代码放置在事件处理程序中,例如,`onclick`事件。这需要用户进行特定操作(如点击)才能触发代码执行。 4. 利用JavaScript协议,将...

    JavaScript各种指令集合(好东西).doc

    此外,JavaScript还可以通过外部文件引入,使用`&lt;script src="script.js"&gt;&lt;/script&gt;`,这种方法便于代码管理和维护,且可利用浏览器缓存减少重复下载。为了优化性能,可以使用`async`或`defer`属性来控制脚本的异步...

    javascript课件

    运算符的优先级对表达式的求值顺序有直接影响。 JavaScript的程序结构主要包括简单语句、控制语句等。简单语句如赋值语句(`变量名 = 表达式`)、注释语句(单行和多行)和输出字符串(使用`document.write()`或`...

    js笔记每日学习笔记.docx

    一元运算符如`++`和`--`用于对变量进行加1或减1的操作,分为前置和后置两种形式,影响运算的顺序。赋值运算符`=`用于将右侧的值赋给左侧的变量。算术运算符如`+ - * / %`用于数值计算,其中加号还有字符串拼接的用途...

    js面向对象简单教程

    随着AJAX技术的兴起和发展,JavaScript在前端交互中的地位更加稳固,对语言本身的需求也愈发多样化。为了更好地管理和组织代码,提升开发效率及可维护性,将面向对象编程(OOP)的理念引入JavaScript成为了一种趋势。 ...

    2023最新前端面试题总结

    文档流可以是从上到下、从左到右或从右到左。文档流的顺序可以影响元素的显示顺序和交互行为。 元素浮动后的三大变化 当元素浮动后,会出现三大变化:1. 元素脱离文档流,2. 元素的宽度变为自适应,3. 元素的 ...

    Javascript笔记

    ### JavaScript核心概念与技术知识点详解 #### 一、JavaScript基础知识 ...以上内容总结了从给定文件中提取的核心JavaScript知识点,涵盖了基本语法、内置对象、浏览器环境等方面的基础知识和技术要点。

    yii2 页面底部加载css和js的技巧

    在现代Web开发中,加载CSS和JavaScript文件的方式对于网站性能和用户体验有着很大的影响。合理地安排脚本和样式的加载位置可以优化页面的加载速度,减少页面加载时的白屏时间,从而提升用户体验。本文针对Yii2框架中...

    2021-2022计算机二级等级考试试题及答案No.12814.docx

    14. 关系数据库记录:关系数据库中的记录前后顺序可以任意颠倒,不影响数据之间的关系。 15. 对象的动作:对象可以执行的动作称为方法,可被对象识别的动作称为事件。 16. 第四媒体:网络媒体被称为第四媒体,因为...

Global site tag (gtag.js) - Google Analytics