├── iframer.jpg
├── package.json
├── LICENSE
├── README.md
└── dist
    └── iframer.js


/iframer.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vmysla/IFRAMEr/HEAD/iframer.jpg


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "iframer",
 3 |   "version": "1.0.0",
 4 |   "description": "IFRAMEr makes your web components portable and your life easier",
 5 |   "main": "./dist/iframer.js",
 6 |   "repository": {
 7 |     "type": "git",
 8 |     "url": "git+https://github.com/vmysla/IFRAMEr.git"
 9 |   },
10 |   "keywords": [
11 |     "iframe",
12 |     "widget",
13 |     "frontend",
14 |     "portable",
15 |     "wrapper",
16 |     "cross-platform"
17 |   ],
18 |   "author": "Vlad Mysla",
19 |   "license": "MIT",
20 |   "bugs": {
21 |     "url": "https://github.com/vmysla/IFRAMEr/issues"
22 |   },
23 |   "homepage": "https://github.com/vmysla/IFRAMEr#readme"
24 | }
25 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2015 Vlad Mysla
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 
23 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | IFRAMEr makes your components portable and your life easier.
 2 | 
 3 | If you look for a simple approach which helps creating reusable web components - IFRAMEr might be exactly what you need. This is a small JavaScript function that wraps your `html` markup with all `styles` and `scripts` you need for its work - into dynamically created `iframe` element, so page can't suddenly break the original design of your component.
 4 | 
 5 | ## Overview 
 6 | 
 7 | Enjoy with the demo on JsFiddle first: https://jsfiddle.net/vmysla/7rhgoeuq/3/embedded/result/
 8 | 
 9 | ![IFRAMEr solved my problem](http://content.screencast.com/users/vmysla/folders/Default/media/f71f289a-fce4-444b-856a-86b8f3c7cce4/iframer.png)
10 | 
11 | Demo: https://jsfiddle.net/vmysla/7rhgoeuq/3/embedded/result/
12 | 
13 | IFRAMEr has no dependencies. 
14 | Total size for minified version of the script is 495 bytes gzipped (798 bytes uncompressed). 
15 | You can extend and customize it by adding own tasks. 
16 | 
17 | Feel free to fork: `git clone https://github.com/vmysla/IFRAMEr`
18 | 
19 | ## Get started
20 | 
21 | Widget is any web component which is wrapped into IFRAME for its wide distribution in the web. 
22 | You can create widgets from any frontend element you have on the page:
23 | 
24 | ``` html
25 |     ...
26 | 	<h1>This is a page</h1>
27 | 	...
28 | 	<!-- Let's say, this is the part of your page which you want to reuse on different sites: --> 
29 | 	<style> 
30 | 		b { color : red; } 
31 | 	</style>
32 | 	<div>
33 |     	Hi! <br/> I'm simple <b id="term">html element</b>!
34 |     </div>
35 |     <script type="widget/javascript">
36 | 	    document.getElementById('term').innerHTML = 'web component';
37 | 	</script>
38 | 	...
39 | ```
40 | It has own HTML markup, CSS styles and JavaScript code as well.
41 | To make a widget - you have to put all those things into script tags with special type attributes: 
42 | 
43 | #### 1. Wrap your `HTML` code with the `script[type=widget/html]` tag
44 | ``` html
45 | 	<script type="widget/html">
46 | 		<style> 
47 | 			b { color : red; } 
48 | 		</style>
49 | 		<div>
50 | 	    	Hi! <br/> I`m simple <b id="term">web component</b>!
51 | 	    </div>
52 | 	</script>
53 | ```
54 | #### 2. Put your `JavaScript` code for widget into `script[widget/javascript]`, right after 1.
55 | ``` html
56 | 	<script type="widget/javascript">
57 | 	    document.getElementById('term').innerHTML = 'iframe widget';
58 | 	</script>
59 | ```
60 | #### 3. Add `IFRAMEr` script just before closing `body` tag
61 | ``` html
62 |      ...
63 |      <script src="//rawgit.com/vmysla/IFRAMEr/master/dist/iframer.min.js"></script>
64 |   </body>
65 | ```
66 | 
67 | Because all your markup and code are placed into own script tags - browser wouldn't render nor execute them.
68 | In another hand, IFRAMEr is looking for such tags on your pages and replaces them with IFRAMEs it generates on fly. 
69 | 
70 | ## Supported browsers
71 | 
72 | Currently it supports IE6+, FF3.5+, and rest of the modern browsers for Linux, Windows and Mac. 
73 | 
74 | ## Google Analytics
75 | As a bonus IFRAMEr automatically provides [Universal Google Analytics Web Tracker](https://developers.google.com/analytics/devguides/collection/analyticsjs/) (ga function) from the page into widget's IFRAME.
76 | 
77 | ## License
78 | MIT.
79 | 


--------------------------------------------------------------------------------
/dist/iframer.js:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * @fileoverview
  3 |  * Frameless jQuery:
  4 |  * https://gist.github.com/vmysla/00806f5c98b51857ee36
  5 |  * @example
  6 |  * ```js
  7 |     var container = document.querySelector('body');
  8 |     var html = '<h1>Timestamp <script>document.write( Date.now() );</script></h1>';
  9 | 
 10 |     function logFrameEvent(frame, eventName) {
 11 |         console.log(
 12 |             'eventName', eventName, 
 13 |             'frame.resolved' , frame.resolved, 
 14 |             'document.body'  , frame.document && frame.document.body 
 15 |         );
 16 |     }
 17 | 
 18 |     var listeners = {
 19 |         'onBeforeAppend': logFrameEvent,
 20 |         'onAfterAppend' : logFrameEvent,
 21 |         'onBeforePopulate': logFrameEvent,
 22 |         'onAfterPopulate': logFrameEvent
 23 |     };
 24 |     ```
 25 |  */
 26 | 
 27 | // Capture the scope for exporting modules.
 28 | var outside = (function () {
 29 |     if(typeof module === 'object' && module.exports) {
 30 |         return module;
 31 |     }
 32 | 
 33 |     if(typeof window === 'object') {
 34 |         return window;
 35 |     }
 36 | 
 37 |     return this;
 38 | })();
 39 | 
 40 | outside.iframer = iframer;
 41 | 
 42 | /**
 43 |  * @function iframer
 44 |  * @returns {void}
 45 |  */
 46 | function iframer(container, html, listeners, domain) {
 47 |     /**
 48 |      * @type object
 49 |      */
 50 |     var frame = {
 51 |         container: container || document.body,
 52 |         html: html || '',
 53 |         listeners: listeners || {},
 54 |         domain: domain || document.domain,
 55 | 
 56 |         element: document.createElement('iframe'),
 57 |         resolved: false,
 58 |         document: false,
 59 |         window: false
 60 |     };
 61 | 
 62 |     iframer.append(frame);
 63 |     if(iframer.resolve(frame)) {
 64 |         iframer.populate(frame);
 65 |     } else {
 66 |         iframer.populate(frame, document.domain);
 67 |     }
 68 | }
 69 | 
 70 | /**
 71 |  * @function append
 72 |  * @name iframer.append
 73 |  * @returns {void}
 74 |  */
 75 | iframer.append = function(frame) {
 76 |     iframer.trigger(frame, 'onBeforeAppend');
 77 |     frame.container.appendChild(frame.element);
 78 |     iframer.trigger(frame, 'onAfterAppend');
 79 | };
 80 | 
 81 | /**
 82 |  * @function populate
 83 |  * @name iframer.populate
 84 |  * @returns {void}
 85 |  */
 86 | iframer.populate = function(frame, domain) {
 87 |     if (domain) {
 88 |         frame.element.populate = iframer.populate;
 89 |         frame.element.src =
 90 |             'javascript:(document.open().domain="' +
 91 |             domain +
 92 |             '") && frameElement.populate(frameElement)';
 93 |     } else {
 94 |         iframer.resolve(frame);
 95 |         iframer.trigger(frame, 'onBeforePopulate');
 96 |         frame.element.frameElement = frame.element;
 97 |         frame.document.write(frame.html);
 98 |         frame.document.close();
 99 |         iframer.trigger(frame, 'onAfterPopulate');
100 |     }
101 | };
102 | 
103 | /**
104 |  * @function trigger
105 |  * @name iframer.trigger
106 |  * @returns {boolean}
107 |  */
108 | iframer.trigger = function(frame, eventName) {
109 |     var handler = frame.listeners[eventName];
110 |     return handler && handler(frame, eventName);
111 | };
112 | 
113 | /**
114 |  * @function resolve
115 |  * @name iframer.resolve
116 |  * @returns {!boolean}
117 |  */
118 | iframer.resolve = function(frame) {
119 |     try {
120 |         frame.window = frame.element.contentWindow;
121 |         frame.document =
122 |             frame.element.contentDocument ||
123 |             (frame.window && frame.window.document);
124 |     } catch (ex) {}
125 |     return (frame.resolved = !!(frame.window && frame.document));
126 | };
127 | 


--------------------------------------------------------------------------------