如何根据窗口宽度加载和运行脚本

时间:2014-09-03 00:14:15

标签: javascript jquery

我正在开发一个1页的迷你应用程序,并且我尝试根据屏幕宽度加载不同版本的应用程序:

(function() { // This is on the body of the document
    var windowWidth = $(window).width();
    if(windowWidth > 1000){
        $('head').append('<script src=\"http://example.com/jquery.full-width-version.js\" type="text/javascript\"><\/script>');
    }else{
        $('head').append('<script src=\"http:/example.com/jquery.responsive-version.js\" type="text/javascript\"><\/script>');
    }
})(); 

我不仅仅使用响应式版本的原因是因为完整版本为此客户端提供了一些自定义CSS。

在其中一个文件的内部有一个名为&#34; IC&#34;具有许多方法和属性,以及准备好启动所有功能的文档。

当我运行它时,我在文档中准备好了消息:

Uncaught TypeError: Cannot read property 'createConfigurator' of undefined 

在行中:

IC.createConfigurator();

因此,它没有将IC识别为对象

2 个答案:

答案 0 :(得分:0)

此代码是否在$(document).ready()?

答案 1 :(得分:0)

尝试以这种方式使用它,设置为&#39; html&#39;特定的大小,大小。

$(function(){
    $('html').data('size','big');
});

$(window).scroll(function (){
    if( $(window).width() > 1000 ){
        if($('html').data('size') == 'big') {
            $('html').data('size','small');
            $('head').append('<script src=\"http://example.com/jquery.full-width-version.js\" type="text/javascript\"><\/script>');
        }
    } else {
        if($('html').data('size') == 'small'){
            $('html').data('size','big');
            $('head').append('<script src=\"http:/example.com/jquery.responsive-version.js\" type="text/javascript\"><\/script>');
    }
});