Provisions for including arbitrary JS and CSS files in iframe.

ruiwen · Mar 29, 2010 · 86ae82e · 86ae82e
1 parent a1a9a46
commit 86ae82e
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 14 deletions.
diff --git a/src/framer.js b/src/framer.js
@@ -8,20 +8,11 @@ Monocle.Framer = function () {
   if (Monocle == this) { return new Monocle.Framer(); }
 
   var k = {
-    scripts: [
-      "../../src/monocle.js",
-      "../../src/compat.js",
-      "../../src/reader.js",
-      "../../src/book.js",
-      "../../src/component.js",
-      "../../src/place.js",
-      "../../src/styles.js",
-      "../../src/flippers/slider.js",
-      "../../src/flippers/legacy.js"
-    ],
-    documentStylesheet:
+    stylesheets: [],
+    documentStyles:
       "body { margin: 0; padding: 0; border: 0; }" +
-      "#rdr { width: 100%; height: 100%; position: absolute; }"
+      "#rdr { width: 100%; height: 100%; position: absolute; }",
+    scripts: ["monocle.js"]
   }
 
   var p = {
@@ -48,14 +39,18 @@ Monocle.Framer = function () {
     p.node.appendChild(p.frame);
     p.cWin = p.frame.contentWindow;
     var html = '<html><head>';
+    for (i = 0; i < k.stylesheets.length; ++i) {
+      html += '<link rel="stylesheet" type="text/css" href="' +
+        k.stylesheets[i] + '"/>';
+    }
+    html += '<style type="text/css">'+k.documentStyles+'</style>';
     for (var i = 0; i < k.scripts.length; ++i) {
       html += '<script type="text/javascript" src="'+k.scripts[i]+'"></script>';
     }
     html += '<script type="text/javascript">' +
       'Monocle.addListener(window, "load", function () {' +
         'window.framer.frameLoaded();' +
       '});</script>';
-    html += '<style type="text/css">'+k.documentStylesheet+'</style>';
     html += '</head><body><div id="rdr"></div></body></html>';
 
     doc = p.cWin.document;

diff --git a/test/framer/framer.css b/test/framer/framer.css
@@ -0,0 +1,3 @@
+p {
+  color: #F0F;
+}
diff --git a/test/framer/index.html b/test/framer/index.html
@@ -72,6 +72,18 @@
         }
 
         var framer = Monocle.Framer();
+        framer.constants.stylesheets = ["framer.css"];
+        framer.constants.scripts = [
+          "../../src/monocle.js",
+          "../../src/compat.js",
+          "../../src/reader.js",
+          "../../src/book.js",
+          "../../src/component.js",
+          "../../src/place.js",
+          "../../src/styles.js",
+          "../../src/flippers/slider.js",
+          "../../src/flippers/legacy.js"
+        ];
         framer.newReader('reader', bookData);
       }
       Monocle.addListener(window, 'load', initFn);