Simple example for loading multiple AMPs iframes.

ampproject · Feb 11, 2016 · 4c179b5 · 4c179b5
1 parent 34c5b86
commit 4c179b5
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 0 deletions.
diff --git a/examples/multiple-docs.html b/examples/multiple-docs.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width">
+  <title>Load AMP documents</title>
+  <style>
+  #frames {
+    position: relative;
+  }
+  iframe {
+    position: absolute;
+    background-color: white;
+  }
+  </style>
+</head>
+<body>
+
+<select id=version>
+  <option value=".max">Original (babel.js)
+  <option value=".min">Minified (closure)
+  <option value>prod (closure)
+</select>
+<button id=load>Load doc</button>
+<div id=frames></div>
+
+<script>
+(function() {
+  var load = document.getElementById('load');
+  var frames = document.getElementById('frames');
+  var count = 0;
+  load.onclick = function() {
+    var iframe = document.createElement('iframe');
+    iframe.src = './article.amp' + getVersion() + '.html#log=0';
+    iframe.width = 320;
+    iframe.height = window.innerHeight - 100;
+    iframe.style.top = (count * 20) + 'px';
+    iframe.style.left = (count * 20) + 'px';
+    frames.appendChild(iframe);
+    count++
+  };
+
+  function getVersion() {
+    var v = document.getElementById('version');
+    return v.options[v.selectedIndex].value;
+  }
+})();
+</script>
+</body>
+</html>
diff --git a/gulpfile.js b/gulpfile.js
@@ -344,6 +344,7 @@ function buildExamples(watch) {
   buildExample('user-notification.amp.html');
   buildExample('vimeo.amp.html');
   buildExample('vine.amp.html');
+  buildExample('multiple-docs.html');
 
   // TODO(dvoytenko, #1393): Enable for proxy-testing.
   // // Examples are also copied into `c/` directory for AMP-proxy testing.