鱼C论坛

 找回密码
 立即注册
查看: 3523|回复: 5

[已解决]为什么加了defer属性后,外部文件还是执行不了?

[复制链接]
发表于 2018-5-6 20:46:27 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能^_^

您需要 登录 才可以下载或查看,没有账号?立即注册

x
html代码主体如下:
<!DOCTYPE html>
<html>
        <head>
                <title>定义文档内嵌代码</title>
                <meta charset="utf-8">
                <meta name="viewport" content="width=width, inital-scale=1.0">
                <meta name="keywords" content="小甲鱼,Web开发,HTML5,css3,web编程教学">
                <meta name="description" content="《零基础入门学习web开发》案例演示">
                <meta name="author" content="小甲鱼">
                <script type="text/javascript" src="java.js" defer></script>
        </head>
        
        <body>
                
                <p>I love fishc.com!</p>
        </body>
</html>

js文件如下:
document.write("我最帅!")

按理来说先解析后执行结果会是先打印:“I love fishc.com!”,再打印“我最帅!”
但是执行结果只打印了:“I love fishc.com!”


最佳答案
2018-5-6 22:58:33
本帖最后由 不二如是 于 2018-5-7 10:49 编辑

正常来讲,输出两个…

为啥只有一个呢?

请看下文分解





正常测试:
<!DOCTYPE html>
<html>
<head>
    <title>定义文档内嵌代码</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=width, inital-scale=1.0">
    <meta name="keywords" content="小甲鱼,Web开发,HTML5,css3,web编程教学">
    <meta name="description" content="《零基础入门学习web开发》案例演示">
    <meta name="author" content="小甲鱼">
    <script type="text/javascript" src="java.js"></script>
</head>
<body>
<p>I love fishc.com!</p>
</body>
</html>

java.js:
document.write("我最帅!");
Snip20180507_77.png


正常浏览器加载顺序,script->输出“我最帅”->渲染DOM树完成->“I love fishc.com!”

增加der延迟(如你所示):
Snip20180507_78.png


"我最帅"去哪里了呢?

小甲鱼演示中明明修改DOM成功了啊,问题出在:
“HTML DOM Document 对象 ”


因为你想利用document.write来在HTML中插入标签,就如同让浏览器在解析HTML的时候动态得添加标签。

一般来讲没问题,但是script有了degfer延迟属性后,就会很尴尬:
defer以后,浏览器早已完成了HTML的解析,文档流关闭,document.write不具备开启文档流的设定,所以defer后,没有DOM树可以用,所以没法插入,所以看不到


一般来讲,document.write,日常开发在外部文件中很少使用...

想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2018-5-6 21:16:52 | 显示全部楼层
你这放到head 有用吗?
看看这里:
https://blog.csdn.net/qq_34986769/article/details/52160532
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2018-5-6 22:58:33 From FishC Mobile | 显示全部楼层    本楼为最佳答案   
本帖最后由 不二如是 于 2018-5-7 10:49 编辑

正常来讲,输出两个…

为啥只有一个呢?

请看下文分解





正常测试:
<!DOCTYPE html>
<html>
<head>
    <title>定义文档内嵌代码</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=width, inital-scale=1.0">
    <meta name="keywords" content="小甲鱼,Web开发,HTML5,css3,web编程教学">
    <meta name="description" content="《零基础入门学习web开发》案例演示">
    <meta name="author" content="小甲鱼">
    <script type="text/javascript" src="java.js"></script>
</head>
<body>
<p>I love fishc.com!</p>
</body>
</html>

java.js:
document.write("我最帅!");
Snip20180507_77.png


正常浏览器加载顺序,script->输出“我最帅”->渲染DOM树完成->“I love fishc.com!”

增加der延迟(如你所示):
Snip20180507_78.png


"我最帅"去哪里了呢?

小甲鱼演示中明明修改DOM成功了啊,问题出在:
“HTML DOM Document 对象 ”


因为你想利用document.write来在HTML中插入标签,就如同让浏览器在解析HTML的时候动态得添加标签。

一般来讲没问题,但是script有了degfer延迟属性后,就会很尴尬:
defer以后,浏览器早已完成了HTML的解析,文档流关闭,document.write不具备开启文档流的设定,所以defer后,没有DOM树可以用,所以没法插入,所以看不到


一般来讲,document.write,日常开发在外部文件中很少使用...

想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 1 反对 0

使用道具 举报

 楼主| 发表于 2018-5-7 11:15:09 | 显示全部楼层
本帖最后由 隨鈊乄鎍慾 于 2018-5-7 11:35 编辑
不二如是 发表于 2018-5-6 22:58
正常来讲,输出两个…

为啥只有一个呢?


哦,说得是呢!感谢不二大神耐心讲解!
也许是没有学过javascript吧!大概明白不二大神的讲解了。但“DOM树”是个什么鬼?不懂。求科普一下。
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2018-7-11 23:47:21 | 显示全部楼层
隨鈊乄鎍慾 发表于 2018-5-7 11:15
哦,说得是呢!感谢不二大神耐心讲解!
也许是没有学过javascript吧!大概明白不二大神的讲 ...

https://baike.baidu.com/item/HTML%20DOM/4585925?fr=aladdin
以上来自百度百科,然而因为基础知识严重匮乏,看不懂.....兄弟你现在知道这是啥玩意儿了么?
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

 楼主| 发表于 2018-7-12 09:05:19 | 显示全部楼层
STmove 发表于 2018-7-11 23:47
https://baike.baidu.com/item/HTML%20DOM/4585925?fr=aladdin
以上来自百度百科,然而因为基础知识严重 ...

应该是文档流关闭了,没有对象可以用吧。
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2024-7-7 06:17

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表