Javascript Asynchronous Loading js file and instantiating an object

Question

I am trying to append a script from another javascript file, I have followed this post on non-blocking async script loading http://calendar.perfplanet.com/2012/the-non-blocking-script-loader-pattern I have been able to load the external script but I am unable to instantiate an object in the second js file, here is the code:

    (function(url, callback){
       var dom,doc,where,iframe = document.createElement('iframe');
       iframe.src = "javascript:false";
       iframe.id = 'iframeTest';
       (iframe.frameElement || iframe).style.cssText = "border: 0px; z-       index: 50; position: fixed; height: 290px; width: 225px; right: 0px; bottom: 0px;";
       where = document.getElementsByTagName('script');
       where = where[where.length - 1];
       where.parentNode.insertBefore(iframe, where);
       try { 
         doc = iframe.contentWindow.document;
        } catch(e) {
           dom = document.domain;
           iframe.src="javascript:var d=document.open();d.domain='"+dom+"';void(0);";
           doc = iframe.contentWindow.document;
        }
        doc.open()._l = function() {
            var head =                  document.getElementById('iframeTest').contentWindow.document.getElementsByTagName('head')[0];
            var script = document.createElement('script');
            script.type = 'text/javascript';
            script.src = url;
            script.onload = callback;
            head.appendChild(script);           
        }
        doc.write('<body onload="document._l();">');
        doc.close();
     })
     ('http://localhost/js/chat.js', function() { var cb  = new Chatbox('6'); cb.init();} );

And in the chat.js file that I am trying to load:

      function Chatbox(orgId)
      {
         this.orgId = orgId;
      }
      Chatbox.prototype.constructor = Chatbox;

      Chatbox.prototype.init = function() {
          this.getStatus();
      };
      .....................................

When I try to load the page , I end up getting error saying 'Uncaught ReferenceError: Chatbox is not defined'. I am aware there are similar questions here but couldn't find a solution for instantiating an object in the second file, though it works if its not async. Hope I am clear and any help will be highly appreciated. Thanks in Advance!

Code seems fine to me. You probably don't need Chatbox.prototype.constructor = Chatbox;; But it's not gonna help anyway I guess)). Let me have a look at it — Said Kholov
– Said Kholov, Commented May 6, 2015 at 4:53

Said Kholov · Accepted Answer · 2015-05-06 06:52:46Z

1

you can access iframe's objects as long it's on the same domain. Otherwise you can't.

document.getElementById('youriframe').contentWindow.cb

that's how you will access it. You can always run you code in the iframe itself. You can append it to your current window and access it as well

edited May 6, 2015 at 6:52

answered May 6, 2015 at 5:02

Said Kholov

2,4961 gold badge18 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

Uday Over a year ago

Kholov, Thanks for your time! So I am developing a chat plugin like the chat plugins that you can embed on your web page, so the chat.js file is a pretty large file and ideally it wouldn't be a good practice to embed thousands of lines of code into the body, so I want to load the second file using another file and pass some parameters to the second file(kind of like google analytics script), your solution does work but wondering if there is any other way to pass those parameters from first file to the second file and instantiate. Thanks again for your time!

Said Kholov Over a year ago

Ah i got it. Sorry why do you need to load it dynamically again? @Uday

Uday Over a year ago

Kholov, Sorry may be I didnt explain it well, so lets say some of my clients will use this plugin and each client has its own identity, so I want to pass the identity number to the chat.js to initiate chat conversations, so I generate the first file dynamically(using backend) with some parameters and pass them to the second script. It works well if the script loading is "sync".

Said Kholov Over a year ago

Okay i got it the solution should be simple. I will edit my answer @Uday

Uday Over a year ago

Kholov, No luck mate! Same result, appreciate your time though!

|

Collectives™ on Stack Overflow

Javascript Asynchronous Loading js file and instantiating an object

1 Answer 1

10 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

10 Comments

Your Answer

Sign up or log in

Post as a guest

Related