`
Rainbow702
  • 浏览: 1076011 次
  • 性别: Icon_minigender_1
  • 来自: 苏州
社区版块
存档分类

动态导入js引发的问题

阅读更多

比较常见的用于动态导入js的方法有以下两种:

//方法一   
document.write("<script language=\"JavaScript\" type=\"text/javascript\" src=\"t.js\"><\/script>");   
  
//方法二   
var script = document.createElement("script");   
script.src = "t.js";   
script.type = "text/javascript";   
document.getElementsByTagName("head").item(0).appendChild(script);   

 

今天做动态导入时发现了问题,t.js内容如下:

function M(){alert("m");}  

 调用代码: 

document.write("<script language=\"JavaScript\" type=\"text/javascript\" src=\"t.js\"><\/script>");   
M();  

 脚本出错,提示缺少对象(使用方法二也有同样的问题)。为了说明问题,我们稍做修改,t.js内容如下: 

function M(){alert("m");}   
alert("t.js");  

 

调用代码:

document.write("<script language=\"JavaScript\" type=\"text/javascript\" src=\"t.js\"><\/script>");   
alert("index.htm");   

 

可以看到,是先弹出"index.htm",再弹出"t.js",这说明t.js的导入是在页面脚本执行完后进行的,在执行M()时,M函数还未声明,因而报错。解决方法:

<script>   
function bar(u) {   
    var x=window.ActiveXObject?new ActiveXObject("MSXML2.XMLHTTP"):new XMLHttpRequest();   
    x.open("GET",u,false);   
    x.send(null);   
    s=x.responseText;   
    try {window.execScript(s)}catch(ex){window.eval(s)};//Mozilla下window.eval大致与IE的window.execScript方法功能相同   
}   
bar("t.js");   
M();   
</script>   

 

采用上边方法的不足是:当index.htm和t.js不在同一台服务器上时,index.htm脚本执行会出错,提示没有权限。下边代码摘自QQ首页,测试通过:

<script type="text/javascript">   
var MiniSite=new Object();   
MiniSite.Browser={   
    ie:/msie/.test(window.navigator.userAgent.toLowerCase()),   
    moz:/gecko/.test(window.navigator.userAgent.toLowerCase()),   
    opera:/opera/.test(window.navigator.userAgent.toLowerCase()),   
    safari:/safari/.test(window.navigator.userAgent.toLowerCase())   
};   
MiniSite.JsLoader={   
    load:function(sUrl,fCallback){   
        var _script=document.createElement('script');   
        _script.setAttribute('charset','gb2312');   
        _script.setAttribute('type','text/javascript');   
        _script.setAttribute('src',sUrl);   
        document.getElementsByTagName('head')[0].appendChild(_script);   
        if(MiniSite.Browser.ie){   
            _script.onreadystatechange=function(){   
                if(this.readyState=='loaded'||this.readyStaate=='complete'){   
                    fCallback();   
                }   
            };   
        }else if(MiniSite.Browser.moz){   
            _script.onload=function(){   
                fCallback();   
            };   
        }else{   
            fCallback();   
        }   
    }   
};   
  
MiniSite.JsLoader.load("http://www.mzwu.com/t.js",function(){M();});   
</script>   
  

 

 原文地址: http://www.ai-java.com/entry/117

分享到:
评论

相关推荐

    JavaScript 导入 excel 兼容IE11

    在JavaScript中导入Excel文件,尤其是在兼容古老的Internet Explorer 11(IE11)浏览器时,需要考虑到这个浏览器并不支持现代的File API和其他先进的Web技术。本文将深入探讨如何实现这一功能,以及涉及到的关键知识...

    一个解决threeJs模块化开发问题的webpack插件

    1. **自动管理全局变量**:Three.js中的许多对象(如THREE.Object3D、THREE.Scene等)都是全局的,这在模块化环境中可能会引发冲突。插件可能会对这些全局变量进行管理,确保它们在每个模块中都能正确引用,而不会...

    关于Myeclipse中的编码规范导入

    合理地设置这些选项可以大大提高代码的可读性,减少因个人习惯差异引发的冲突。 总的来说,通过MyEclipse的编码规范导入功能,团队能够统一开发风格,提升代码质量,降低维护成本。同时,这也是每个开发者应该养成...

    JS格式化工具

    8. **动态输入框调整语法**:在某些高级的JS格式化工具中,用户可以通过实时的输入框调整代码格式设置,比如缩进空格数、是否使用双引号等,让工具更好地适应个人或团队的偏好。 9. **兼容性**:优秀的JS格式化工具...

    Node.js-require-node在前端require后端javascript代码并调用

    1. **兼容性问题**:由于不是所有Node.js模块都能在浏览器环境中运行,因此在尝试导入任何后端模块之前,必须确保该模块不依赖于Node.js特有的API(如fs、os等)或C/C++扩展。 2. **安全风险**:将Node.js后端代码...

    jsFormatter

    在使用**jsFormatter**时,用户通常需要将`jsFormatter.js`文件导入到EditPlus的插件目录中。这个文件包含了插件的核心代码,执行格式化任务的逻辑都在其中。安装完成后,用户可以通过设置快捷键或者在EditPlus的...

    javascript 自定义eval函数实现

    同时,`eval`可以用于动态加载和运行模块,尽管现代JavaScript推荐使用`import()`函数进行动态导入。 最后,压缩包中的`FreeMarker设计指南.chm`文件名暗示了一个与JavaScript无关的话题,FreeMarker是一个用Java...

    格式化javascript工具

    使用此类工具,开发者可以快速地将杂乱的JavaScript代码整理得井井有条,提升团队协作效率,减少因为代码格式问题引发的误解和冲突。同时,良好的代码格式也有助于代码审查,方便找出潜在的错误和改进点。 在实际...

    js 文件排版工具,可以生成工整有序的代码

    JavaScript(简称JS)是一种广泛用于前端开发的编程语言,它在网页交互、数据处理和页面动态效果方面扮演着重要角色。然而,随着代码量的增加,保持代码的整洁和有序变得越来越困难。这就是JS文件排版工具的重要性...

    Node.js-Node.js编码风格指南

    Node.js是一种基于Chrome V8引擎的JavaScript运行环境,它让开发者能够在服务器端使用JavaScript进行编程。"Node.js编码风格指南"旨在提供一套统一的代码编写规范,以提高代码的可读性、可维护性和团队协作效率。...

    详解webpack import()动态加载模块踩坑

    解决这个问题的方法是尽可能使导入路径静态化,例如使用字符串拼接: ```javascript import(`./pages/${ComponentName}`) ``` 这样既能保持封装性,又能避免引入不必要的模块。 此外,`import()` 中的相对路径是...

    一个Nuxtjs的项目收集前后端分离中出现的各种Bug方便大众

    使用`@nuxtjs/style-resources`模块导入全局样式,配置`assetsDir`来指定静态资源目录,可有效解决这些问题。 6. **部署和服务器配置**:在生产环境中,Nuxt.js应用需要正确部署到服务器,如使用PM2进行进程管理。...

    str2js:将纯文本转换为JavaScript字符串文字

    使用`str2js`可以有效地避免在JavaScript中拼接字符串时的性能问题,因为字符串连接操作在JavaScript中相对昂贵。通过将整个HTML文本作为字符串字面量,我们可以一次性创建一个大型字符串,而不是每次添加一小部分。...

    在easyUI开发中,出现jquery.easyui.min.js函数库问题的解决办法

    在使用EasyUI进行Web开发时,我们可能会遇到与`jquery.easyui.min.js`函数库相关的各种问题。EasyUI是基于jQuery的一个强大且易用的前端框架,它提供了丰富的组件和功能,如表格、对话框、菜单、布局等,极大地简化...

    JS代码自动排版工具

    JavaScript(简称JS)是一种广泛应用于Web开发的轻量级编程语言,它负责网页的动态交互。在编写JS代码时,保持代码的整洁和规范是非常重要的,这有助于提高代码的可读性和可维护性。"JS代码自动排版工具"就是为了...

    详解Node.js模块间共享数据库连接的方法_.docx

    在需要与数据库交互的模块(如 `user.js` 和 `flight.js`)中,不再直接导入 `mongoose`,而是导入 `database.js` 中暴露的数据库连接。这样,这些模块就可以通过这个共享的连接来执行数据库操作: ```javascript...

    qrcodejs.zip最新下载

    使用这个版本的库,你可以确保代码与当前项目所依赖的版本一致,避免因版本差异引发的问题。 总结来说,QRCode.js 是一个实用的 JavaScript 工具,可以帮助开发者在网页上轻松生成二维码,提供了一种高效且兼容性...

    解决vue单页面应用进入页面加载所有 js 的问题

    Vue Router 提供了动态导入(`require.ensure`或`import()`)的功能,允许我们在实际需要某个组件时才加载它。例如: ```javascript const My = r =&gt; require.ensure([], () =&gt; r(require('@/pages/my')), 'my') ...

    【JavaScript源代码】require加载器实现原理的深入理解.docx

    `eval`函数可以直接执行一个字符串作为JavaScript代码,但它的安全性较低,容易引发安全问题,因此在生产环境中应谨慎使用。`new Function`则可以创建一个函数对象,其参数是一个包含JavaScript代码的字符串,执行这...

    java代码导入Excel表.txt

    注意这里使用字符串拼接的方式构建SQL语句可能会引发SQL注入问题,建议使用参数化查询或ORM框架来代替。 ##### 2.4 Service层 虽然示例中没有给出具体的service层实现,但通常会有一个`ProductService`类,其中包含...

Global site tag (gtag.js) - Google Analytics