如何基于窗口宽度加载和运行脚本

Question

I'm working on a 1-page mini-app and I'm trying to load a different version of the the app based on the screen width:

(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>');
    }
})(); 

The reason I'm not just using the responsive version is because the full-version has some custom CSS for this client.

Inside of either one of the files there is an object called "IC" with a lot of methods and properties, and a document ready which initiates all the functions.

When I run it I get the message inside of the document ready:

Uncaught TypeError: Cannot read property 'createConfigurator' of undefined 

In the line:

IC.createConfigurator();

So, it is not recognizing IC as an object

Answer 1

此代码是否在$（document）.ready（）中？

Answer 2

try using it this way, setting to 'html' a specific size, big and small.

$(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>');
    }
});