Created
May 7, 2018 19:14
-
-
Save meyju/18cea94044db554212606db7217ae0e3 to your computer and use it in GitHub Desktop.
iframe Rotator with preload of next frame
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <style type="text/css"> | |
| body, | |
| html { | |
| margin: 0; | |
| padding: 0; | |
| height: 100%; | |
| overflow: hidden; | |
| } | |
| .content { | |
| position: absolute; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| top: 0px; | |
| } | |
| </style> | |
| <title>iFrame Rotator</title> | |
| </head> | |
| <body> | |
| <iframe class="content" id="iframe1" src="" width="100%" height="100%" frameborder="0"></iframe> | |
| <iframe class="content" id="iframe2" src="" width="100%" height="100%" frameborder="0"></iframe> | |
| </body> | |
| <script type="text/javascript"> | |
| // Time to disblay iframe | |
| const TIMEOUT = 1000 * 15; // 15 seconds | |
| // Time to load site before switching visibility | |
| const SITE_LOAD_TIME = 1500; | |
| var urls = [ | |
| "https://www.wikimedia.org/", | |
| "https://en.wikipedia.org", | |
| "https://www.wikidata.org", | |
| "https://en.wikinews.org/wiki/Main_Page" | |
| ]; | |
| const iframe_1 = document.getElementById("iframe1"); | |
| const iframe_2 = document.getElementById("iframe2"); | |
| var index = 0; | |
| // Set initial values | |
| iframe_1.src = urls[index]; | |
| iframe_1.style.zIndex = 1; | |
| iframe_1.style.visibility = 'visible'; | |
| iframe_2.style.zIndex = 0; | |
| iframe_2.style.visibility = 'hidden'; | |
| function load_next_url() { | |
| index = (index + 1) % urls.length; | |
| select_bottom().src = urls[index]; | |
| setTimeout(load_next_url, TIMEOUT); | |
| setTimeout(change_order, SITE_LOAD_TIME); | |
| } | |
| /** | |
| * Return iFrame which currently hidden - iFrame which has a lower z-index. | |
| * | |
| * @return {Element Object} iFrame DOM element | |
| */ | |
| function select_bottom() { | |
| if (parseInt(iframe_1.style.zIndex, 10) > parseInt(iframe_2.style.zIndex, 10)) { | |
| return iframe_2; | |
| } else { | |
| return iframe_1; | |
| } | |
| } | |
| /** | |
| * Switch order of the iFrames. | |
| * The iFrame from bottom will move on top. | |
| */ | |
| function change_order() { | |
| if (parseInt(iframe_1.style.zIndex, 10) > parseInt(iframe_2.style.zIndex, 10)) { | |
| iframe_1.style.zIndex = 0; | |
| iframe_1.style.visibility = 'hidden'; | |
| iframe_2.style.zIndex = 1; | |
| iframe_2.style.visibility = 'visible'; | |
| } else { | |
| iframe_1.style.zIndex = 1; | |
| iframe_1.style.visibility = 'visible'; | |
| iframe_2.style.zIndex = 0; | |
| iframe_2.style.visibility = 'hidden'; | |
| } | |
| } | |
| setTimeout(load_next_url, TIMEOUT); | |
| </script> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment