A jquery plugin that renders iframes for different servers. Very useful for eye-testing after deployments.
// Initialize the hit-all
$('.some-div').hitAll({
servers: ['server1.your-site.com', 'server2.your-site.com'],
path: '/path/to/test',
protocol: 'https' // optional. default http
});
// Update the paths
$('.some-div').hitAll({
path: '/path/to/new/test'
});
// Change the servers
$('.some-div').hitAll({
servers: ['new-server.your-site.com']
});
| $.fn.hitAll = function (opts) { | |
| if (opts.servers && this.data('hitAll-servers') !== opts.servers) { | |
| var that = this.empty(); | |
| opts.servers.forEach(function (serv, i) { | |
| that.append($('<div>').addClass('frame').append(serv).append($('<iframe>').data('server', serv))); | |
| }); | |
| this.data('hitAll-servers', opts.servers); | |
| } | |
| if (opts.path) this.data('hitAll-path', opts.path); | |
| var path = this.data('hitAll-path'); | |
| if (path) { | |
| return this.find('iframe').each(function (i, ifr) { | |
| var $ifr = $(ifr); | |
| $ifr.attr('src', (opts.protocol || 'http') + '://' + $ifr.data('server') + path); | |
| }); | |
| } | |
| }; |
| <html> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <style> | |
| div.frame { | |
| float:left; | |
| border: 1px solid #000; | |
| font-weight:bold; | |
| margin:10px 10px 0px 0px; | |
| } | |
| iframe { | |
| width:350px; | |
| height:290px; | |
| border:none; | |
| display:none; | |
| } | |
| div.active iframe { | |
| display:block; | |
| } | |
| input { | |
| height:30px; | |
| width:335px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <input id="path" value="/" /> | |
| <div id="hit-all" class="instance active"> | |
| </div> | |
| <script type="application/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> | |
| <script type="application/javascript" src="hitAll.js"></script> | |
| <script> | |
| $(document).ready(function () { | |
| $('#hit-all').hitAll({ | |
| servers: ['duckduckgo.com', 'bing.com'], | |
| path: '/', | |
| protocol: 'http' | |
| }); | |
| $('#path').on('change', function (e) { | |
| $('#hit-all').hitAll({path: $(e.target).val()}); | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |