JS_001:web页面js加载执行顺序

最新推荐文章于 2023-03-14 16:21:10 发布

ihours

最新推荐文章于 2023-03-14 16:21:10 发布

阅读量490

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/itguaicai/article/details/45418331

版权

web页面是按js在页面出现的先后顺序进行加载的（无论是页内js或外部js文件），执行也是从前到后依次执行的（onload事件或 jquery的onready事件是在整个文档机构加载完才执行）。下面来看一个示例：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'index.jsp' starting page</title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
	
  	<script type="text/javascript" src="js/first.js"></script>
  	<script type="text/javascript">
  		alert("2--第2执行");
  	</script>
  </head>
  
  <body οnlοad="alert('4--第4执行');">
    This is my JSP page. <br>
    <script type="text/javascript">
  		alert("3--第3执行");
  	</script>
  </body>
</html>

first.js内容：

alert("1--第1执行");

运行该页面时，会依次弹出如下提示：

1--第1执行
2--第2执行
3--第3执行
4--第4执行

“3--第3执行”是在页面打印出“This is my JSP page.”信息后，才弹出提示的。

1、变量可以定义在外部文件中，但必须出现在使用该变量的上面。

<script type="text/javascript" src="js/first.js"></script>
<script type="text/javascript">
  	alert(var1);
</script>

first.js内容：

var var1=1;

运行时输出：1。若first.js的引用放在"alert(var1)",则会提示“var1未定义”。

2、页面的全局变量在整个页面的jQuery中都是可以引用的，不受位置限制。

<script type="text/javascript" src="js/first.js"></script>
  	<script type="text/javascript">
  		var var2=2;
  		$(function(){
  			alert("page in "+var2);
  		})
  	</script>

first.js内容：

$(function(){
	alert(var2);
})

运行时，先后输出：

2
page in 2

此处可以看出，页面的jquery也是按页面加载的循序先后执行的。

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

<script type="text/javscrpt">//<![CDATA[
  aa();            //浏览器报错//]]>
</script>
<script type="text/javscrpt">//<![CDATA[
  aa();   //输出 1 
  function aa()
  {
    alert(1);
  }//]]>
</script>

4、IE9及IE9以下版本中，通过documemt.write()写到页面的内容，浏览器默认先解析本页面的内容，再解析外部文件的js。

<pre name="code" class="javascript"><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未定义。

解决方法：

<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>