精华内容
下载资源
问答
  • script标签位置

    2020-11-09 23:43:55
    一、script标签位置应该在哪里? 在平常的时候我们发现,有的把script标签放在头部,(实例): <head> <meta charset="utf-8"> <title>Document</title> <script type="text/...

    一、script标签位置应该在哪里?

    在平常的时候我们发现,有的把script标签放在头部,(实例):

    <head>
        <meta charset="utf-8">
        <title>Document</title>
        <script type="text/javascript">
            console.log("hello")
        </script>
    </head>
    

    有的把script标签放在body底部

    	<script>
        	console.log("hello")   
    	</script>
    </body>
    

    其实正常情况下放在哪里都可以,但是一般情况下推荐放在body底部,HTML中代码由上往下执行,会等js代码执行完才会加载页面。会让网页内容呈现滞后,导致用户感觉到卡,影响用户体验。特殊情况下,一些特别依赖js网页放在头部。

    总结

    正常情况下,放在任何地方;一般情况下,放在body底部;特殊情况下,放在头部。

    展开全文
  • script标签位置的放置

    千次阅读 2016-04-30 21:55:32
    script标签放置位置

    script标签的位置存放

    一般放置在<body></body>标签之后

    举一个栗子:script标签放在head标签中


    这个页面在执行过程中会出错:

               直接IE浏览器中执行,在控制台会出现错误:SCRIPT5007: 无法获取未定义或 null 引用的属性“value”



    错误原因:

    HTML文件是逐行解析,在解析到     var  input1 = document.getElementById("nameid")时,还没有解析到id值为"nameid"的输入框的值,

    所以或出现错误


    解决一般把<script type="text/javascript">   </script>放在<body></body>之后


    展开全文
  • script标签位置问题

    2019-11-03 17:02:35
    位置问题 放在头部<head></head>中 放到头部可能导致无法获取到需要操作的元素,js代码不涉及操作页面中的元素时,可放在头部。 window.onload =function (){ //事件:当页面中的结构和内容都加载完成...

    <script></script>位置问题

    放在头部<head></head>中

    放到头部可能导致无法获取到需要操作的元素,js代码不涉及操作页面中的元素时,可放在头部。

    window.onload =function (){
    	//事件:当页面中的结构和内容都加载完成才会执行这里面代码
    }
    
    常放在<body></body>中

    页面中的结构和内容加载完成后执行js代码

    展开全文
  • script>在HTML中的位置问题 今天在做Ajax发送POST请求实验时遇到了一个由于<script>位置放错导致的错误。 代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8">...

    关于<script>在HTML中的位置问题

    今天在做Ajax发送POST请求实验时遇到了一个由于<script>位置放错导致的错误。
    代码如下:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>AJAX发送请求</title>
    </head>
    
    <script>	
    	var btn = document.getElementById("btn");
    	var textusername = document.getElementById("username");
    	var textpassword = document.getElementById("password");
    	
    	btn.onclick = function(){
    		
    		//获取界面上的元素value
    		var username = textusername.value;
    		var password = textpassword.value;
    		
    		//通过XMLHttpRequest发送POST请求
    		var xhr;
    		xhr = new XMLHttpRequest();
    		xhr.open("POST","LoginServlet");
    		//如果请求体是urlencoded格式,必须设置这个请求头
    		xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
    		xhr.send("username=" + username  + "& password=" + password);
    		xhr.onreadystatechange = function(){
    			if(this.readyState != 4) return;
    			document.getElementById("result").innerHTML = xhr.responseText;
    		}
    	}
    </script>
    
    <body>
    <table border="1">
    	<tr>
    		<td>用户名</td>
    		<td><input type="text" id="username" name="username"></td>
    	</tr>
    	<tr>
    		<td>密码</td>
    		<td><input type="password" id="password" name="password"></td>
    	</tr>
    	<tr><td><button type="button"  id="btn">登录</button></td>
    		<td><label id="result"></label></td></tr>
    	
    </table>
    </body>
    </html>
    

    结果:浏览器控制台报错Uncaught TypeError:Cannot set prioerty ‘onclick’ of full
    浏览器控制台报错
    解决方案:百度说是<script>位置的问题,于是试着把<script>代码块的内容放到了</body>标签之后,结果没有报错了。

    问题所在:这里的<script>脚本需要访问到dom元素,但此时还未生成dom元素,所以报错。

    原理: HTML是自上而下加载页面的,但引入的css和javascript的顺序有所不同,css引入执行加载时,程序仍然往下执行,而执行到<script>脚本时则中断线程,待该script脚本执行结束之后程序才继续往下执行。

    <script>应该放在HTML的什么位置呢?(由百度和知乎所得)

    1. 对于必须在DOM加载之前运行的脚本,放在<head>标签中。但要确保内敛的这些脚本很小,最好是压缩过的,并且执行速度很快,不会造成浏览器渲染的阻塞。
    2. 对于需要访问DOM的脚本,放在<body>标签中。
    3. 使用<script>标签的asyncdefer属性。
    • async实现脚本的异步加载(仅适用于外部脚本,即使用src属性时),不会阻塞浏览器对页面的渲染,但带有async属性的脚本不能保证它们执行的前后顺序。
      下面是摘自W3school的例子:
    <!DOCTYPE html>
    <html>
    <body>
    
    <p id="p1">Hello World!</p>
    <script type="text/javascript" src="/example/html5/demo_async.js" async="async"></script>
    
    </body>
    </html>
    
    • defer实现脚本的延时加载(仅适用于外部脚本,即使用src属性时),脚本会被延迟至整个页面解析完成后再执行。
      下面是摘自W3school的例子:
    <html>
    <body>
    
    <script type="text/javascript" defer="defer">
    alert(document.getElementById("p1").firstChild.nodeValue);
    </script>
    
    <p>上面的脚本会从下面的段落中请求信息。通常,这是做不到的,因为在段落加载之前,脚本已经运行过了。</p>
    
    <p id="p1">Hello World!</p>
    
    <p>然而,defer 属性规定了脚本必须在页面加载完毕后执行。这样,脚本就可以从段落中请求数据了。</p>
    
    <p><b>注释:</b>该属性只能在 Internet Explorer 中运行。</p>
    
    </body>
    </html>
    

    关于 <script>放在<body>结束标签之后<html>标签之前 还是 <body>结束标签之前
    测试发现这两种方法的结果都没有区别。根据HTML5标准中出现的HTML语法规则,如果在</body> 后再出现<script>或任何元素的开始标签,都是parse error,浏览器会忽略之前的</body>,即视作仍旧在body内,最终的DOM树里,<script>元素还是会成为body的子节点。虽然把<script>放在<body>结束标签之后<html>标签之前也没报错,但是这不符合标准,而且没有带来任何好处,所以不建议这样做。

    参考文章:
    为什么把 Script 标签放在 body 结束标签之后 html 结束标签之前?
    该把JS文件放在HTML文档的那个位置

    展开全文
  • 在哪里放置 JavaScript 代码? ...但放置的地方,会对 JavaScript 代码的正常执行会有一定影响,具体如下所述。 ...将 JavaScript 代码放置于 HTML 文档的 标签之间是一个通常的做法。由于 HTML 文档
  • script标签位置

    2020-11-02 16:45:15
    在我们编写代码的时候,会在页面内使用为什么很多人把script标签放在底部 初学者在学习JS的时候看见很多DEMO里面的script标签写在底部,但是却不是很清楚为什么,下面来解释一下: 虽然理论上放在哪里都是可以的,...
  • script标签位置详解

    2019-06-09 17:22:53
    标签来写JS,虽然理论上script标签位置放在哪里可以,但是还是有一点区别的。 2、为什么很多人把script标签放在底部: 初学者在学习JS的时候看见很多DEMO里面的script标签写在底部,但是却不是很清楚为什么,...
  • 2.1.1 script标签位置

    2018-01-11 18:08:33
    script标签在html文档中的位置 经过尝试在html文档的各个部分插入标签引入外部JavaScript文件,发现所有位置的JavaScript文件都成功加载了,包括标签内外,标签之间的奇葩位置,最后在开发者工具下,发现在html的...
  • 关于script标签位置

    2019-09-30 10:01:44
    标签被放在head里:在页面渲染DOM树之前依次下载js文件,(注:下载js文件会阻塞渲染)下载完毕后开始渲染页面,如果引入了很多js文件,会导致页面加载慢,出现空白页情况。 <script>标签放在body末尾:先...
  • 编写 JavaScript 时,script 标签应该放在哪?本文将会详细地解答。。。
  • 存放的位置 &lt;head&gt;&lt;/head&gt;之间 &lt;body&gt;&lt;/body&gt;之间 &lt;/body&gt;之后  【二】&lt;script&gt;&lt;/script&gt;存放的地方会...
  • script标签在html文档中位置的区别? 一.写在中 在head标签中写script标签分为两种情况 1.通过script标签src属性引入外部js文件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf...
  • * 建议把script标签放到</body>后面  * 如果现在有这样一个需求  在js里面需要获取到input里面的值,如果把script标签放到head里面,会出现问题。HTML解析是从上到下解析的,script标签放到head里面,直接...
  •  一般script标签会被放在头部或尾部。头部就是<head></head>里面,尾部一般指<body></body>里,但也有放在</body>闭合标签之后的。 究竟这些位置不同有什么不一样呢?下面我来详细说...
  • html文件是自上而下的执行方式,但引入的css和...所以,一般将script放在body之后是因为避免长时间执行script脚本而延迟阻塞。而有一些页面的效果的实现,是需要预先动态的加载一些js脚本,所以这些脚本应该放在...
  • 放在head标签内 放在body标签内 放在body标签后,html标签内 放在html标签后 <title>script location in html</title> <script type="text/javascript"> alert("script in the head tag ");</script> <h1>script
  • 使用<script>元素有两种方式一种是在页面嵌入JavaScript代码 ,...标签内部的JavaScript代码将被从上至下依次解释 <script type="text/javascript"> var h = "hello"; function sayh(params) { ale...
  • 一般放置的位置:<head>标签内,<body>标签内,<body>标签后(建议放在body标签后,利于页面的优化,优化页面结构加载的速度)  1.<head>标签内:外部引入的js文件,或者不涉及页面元素...
  • js script 标签

    2020-10-29 17:19:28
    目录 1....1.1 直接将JavaScript代码放入<script>标签中。1.2 通过src引用外部JavaScript文件。 2....script>...2.1 src2.2 type2.3 cross... 标签位置。4. 动态加载JavaScript。 1. HTML中使用JavaScript。 ..
  • script&gt;标签放置于&lt;head&gt;标签内,如下所示: &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;标题&lt;/title&gt; &lt;...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,231
精华内容 492
关键字:

script标签位置