Merge pull request #67 from allmonday/dev

enable scripts in iframe head

src/canvas/config/config.js

@@ -6,5 +6,11 @@ define(function () {
 		// Coming soon
 		rulers: false,
 
+		/*
+		 * append scripts in head of iframe before renderBody content
+		 * need to manually maintain the same scripts in cms's render template
+		*/ 
+		scripts: []
+
 	};
 });

src/canvas/view/CanvasView.js

@@ -30,6 +30,33 @@ function(Backbone, FrameView) {
       this.em.trigger('canvasScroll');
     },
 
+    /**
+     * Insert scripts into head, it will call renderBody after all scripts loaded or failed
+     * @private
+     */
+    renderScripts: function () {
+        var frame = this.frame;
+        var that = this;
+
+        frame.el.onload = function () {
+          var scripts = that.config.scripts.slice(0),  // clone
+              counter = 0;
+            
+          function appendScript(scripts) {
+            if (scripts.length > 0) {
+              var script = document.createElement('script');
+              script.type = 'text/javascript';
+              script.src = scripts.shift();
+              script.onerror = script.onload = appendScript.bind(null, scripts);
+              frame.el.contentDocument.head.appendChild(script);
+            } else {
+              that.renderBody();
+            }
+          }
+          appendScript(scripts);
+        };
+    },
+
     /**
      * Render inside frame's body
      * @private
@@ -198,7 +225,11 @@ function(Backbone, FrameView) {
         this.model.get('frame').set('wrapper', this.wrapper);
         this.$el.append(this.frame.render().el);
         var frame = this.frame;
-        frame.el.onload = this.renderBody;
+        if (this.config.scripts.length === 0) {
+          frame.el.onload = this.renderBody;
+        } else {
+          this.renderScripts(); // will call renderBody later
+        }
       }
       var ppfx = this.ppfx;
       toolsEl = $('<div>', { id: ppfx + 'tools' }).get(0);