This repository has been archived by the owner on Apr 12, 2021. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
/
client.html
123 lines (105 loc) · 6.61 KB
/
client.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="gardr.github.io : website">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>Safe embedding with Garðr JavaScript library</title>
<link rel="stylesheet" type="text/css" media="screen" href="http://dev.finncdn.no/bb/latest/css/so/so_core.css">
<!-- <link rel="stylesheet" type="text/css" media="screen" href="http://cache.finn.no/styles/so/components/components.css">
<link rel="stylesheet" type="text/css" media="screen" href="http://cache.finn.no/styles/so/finn.css">-->
<link rel="stylesheet" type="text/css" media="screen" href="css/stylesheet.css">
<link rel="stylesheet" type="text/css" href="css/prism.css">
<!--[if IE 9 ]>
<link rel="stylesheet" type="text/css" media="screen" href="http://cache.finn.no/styles/so/ie9.css">
<![endif]-->
<!--[if IE 8 ]>
<link rel="stylesheet" type="text/css" media="screen" href="http://cache.finn.no/styles/so/ie8.css">
<![endif]-->
<!--[if lte IE 8]>
<link rel="stylesheet" type="text/css" media="screen" href="http://cache.finn.no/styles/so/ie.css">
<![endif]-->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-45931135-1', 'gardr.github.io');
ga('send', 'pageview');
</script>
</head>
<body class="bg-white">
<div class="mod header contrast mbn mrn">
<div class="inner">
<div class="bd relative overflowify gardr-header">
<div class="liquid">
<div class="body">
<a id="forkme_banner" href="https://github.com/gardr">View on GitHub</a>
<h1 class="mtn">The Garðr Projects</h1>
</div>
</div>
</div>
</div>
</div>
<div class="page liquid bg-white mainc">
<div class="body">
<div class="mod">
<div class="inner">
<div class="bd">
<h1>The Garðr JavaScript library</h1>
<!--
Removes the need for friendly iframes support in delivery systems and supports both HTML, Image and Flash based adverts.
The iframe should be hosted on a different domain to enable security-features in the browser that prevents third party
content to insert content or get user info from the parent page. postMessage is used for cross-domain communication
between the frames.
-->
<h2>Ext and host</h2>
<p>The safe frame initiative has the concepts of <em>ext</em> and <em>host</em>, were <em>ext</em> is the library that goes into the Iframe and <em>host</em> is the script which runs on the host site.</p>
<!-- pre class="language-bash">
// sample code will come here
</pre-->
<h2>Adding gardr to your project</h2>
<p>Add dependencies</p>
<p>If you don't have a package.json
<pre><code class="language-bash">$ npm init</code></pre>
</p>
<p>Add the host and ext modules as a dependency</p>
<pre><code class="language-bash">$ npm install --save gardr-host gardr-ext</code></pre>
<h2>Adding plugins</h2>
<p>Simply install like a regular dependency</p>
<pre><code class="language-bash">$ npm install --save gardr-someFeature-plugin</code></pre>
<h2>Building bundles</h2>
<p>Take a look at the `browserify` task in package.json. It uses [browserify](https://github.com/substack/node-browserify) to generate a static browser-version of the files in /lib.</p>
<pre><code class="language-bash">$ npm run browserify</code></pre>
<p>You can choose to make your own bunles using CommonJS, or transform it to an [UMD module](https://github.com/umdjs/umd) using the `--standalone` (or `-s`) argument to load it with an AMD loader or `window.gardrHost`.</p>
<pre><code class="language-bash">$ browserify -s gardrHost lib/hostBundle.js > browserified/hostBundle.js</code></pre>
<p>If you want source maps to make debuggin the code easier, add `--debug` as browserify argument. Browserify only adds source maps as an inline comment. So if you want and external source map, use [exorcist](https://github.com/thlorenz/exorcist) to extract it:</p>
<pre><code class="language-bash">$ browserify lib/hostBundle.js --debug | exorcist browserified/hostBundle.js.map > browserified/hostBundle.js</code></pre>
<h2>Logging</h2>
<p>Debugging can be done by configuring logging to either the browser console or as an overlay inside the iframes rendered by Garðr.</p>
<p>You can turn on logging by adding an url-fragment with log level: #loglevel=4
</p>
<p>By default it will display an overlay inside each banner with the log output. If the banner isn't visible, you can output to console by using:<br>
<pre><code class="language-bash">#loglevel=4&logto=console</code></pre>
</p>
<p>*NB!* If the banner injects another iframe we have no good way of catching errors :(</p>
<h2>No support for IE7 or older</h2>
<p>We have very few IE7 users, and some of the techniques used in Garðr (like postMessage) require many dirty hacks to work in IE7.</p>
<h2>Polyfills required for IE8+ support</h2>
<p>To keep the code minimal for modern browsers (mobile), we use some new features that came in EcmaScript 5. They are easy to implement in older browsers using a few simple polyfills. You can include it with a conditional-comment, so only users with old IE versions download the extra script. See the iframe html for an example.</p>
<p>[ES5-shim](https://npmjs.org/package/es5-shim) You do not need a sham (unsafe polyfills).</p>
<h2>Samples in the wild</h2>
<p>All of the display adverts on [m.finn.no](http://m.finn.no/) are using Garðr to safely embed responsive adverts written in HTML, CSS and JS.</p>
</div>
</div>
</div>
</div>
</div>
<footer class="footer bg-gardr pal contrast">
<p>
View all <a href="https://github.com/gardr/">Garðr projects on GitHub</a> | Created October 2013
</p>
</footer>
<script src="js/prism.js"></script>
</body>
</html>