javascript - 关于jQuery中prepend方法的实现原理
迷茫
迷茫 2017-04-11 13:02:09
[JavaScript讨论组]

假设有一个 hello.js 文件 该js文件里面的内容就一句。如下

alert('hello world');

我在一个页面中动态加载该js文件,页面中有一个按钮,当我点击按钮的时候就开始加载该文件,我的代码如下

下面的代码是当点击按钮时候要执行的。

var script = document.createElement("script");
script.type = 'type/javascript';
script.src = 'hello.js';
script.async = 'async';
script.charset = 'utf-8';

问题来了

如果使用 jQuery的追加方法就会弹出内容,如果使用原生的appendChild方法就无法弹出内容。

$("head").append(script); // 可以弹出内容
document.getElementsByTagName("head")[0].appendChild(script); // 无法弹出内容

请问一下 prepend , append 这些方法是怎么实现追加内容后就执行里面的代码的?

迷茫
迷茫

业精于勤,荒于嬉;行成于思,毁于随。

全部回复(3)
PHPz

诚如首答所说,你在设置script标签类型时写错,故浏览器无法识别此元素,将其改为text/javascript即可。

由以下两图也可看出,jquery是通过Ajax去请求的hello,js文件的,而js是通过script标签去加载hello.js文件的。

怪我咯

因为你的代码里 script.type = 'type/javascript'; 这句导致浏览器认为不是javascript,所以不执行

jquery里的方法做了判断,会忽略你的错误设置,用ajax加载script,然后eval执行

大家讲道理

jquery会多做一步就是ajax请求,

例如document.getElementsByTagName("head")[0].appendChild(script);之后
               加多一个 jQuery.ajax({
                                url: './hello.js',
                                type: "GET",
                                    
                            });
也能有类似效果,jquery封装的ajax方法会用eval来执行里面的内容,拆出一小块源码
        globalEval: function( data ) {
            if ( data && jQuery.trim( data ) ) {
                // We use execScript on Internet Explorer
                // We use an anonymous function so that context is window
                // rather than jQuery in Firefox
                ( window.execScript || function( data ) {
                    window[ "eval" ].call( window, data );
                } )( data );
            }
        }
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号