Eu precisei recentemente, numa situação de emergencia, em que eu não tinha acesso a DNS de um domínio e nem tempo para propagação, manter uma URL de um site e puxar o conteúdo de outro servidor.
A solução mais rápida, foi fazer um iframe, mas precisava que fosse completamente transparente e imperceptível para o usuário. A solução está abaixo:
|
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 |
<html lang="en" class="no-js"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <style> html body {width: 100%;height: 100%;padding: 0px;margin: 0px;overflow: hidden;font-family: arial;font-size: 10px;color: #6e6e6e;background-color: #000;} #preview-frame {width: 100%;background-color: #fff;}</style> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script> //function to fix height of iframe! var calcHeight = function() { //var headerDimensions = 0; //$('#header-bar').height(); $('#preview-frame').height($(window).height()); } $(document).ready(function() { calcHeight(); /*$('#header-bar a.close').mouseover(function() { $('#header-bar a.close').addClass('activated'); }).mouseout(function() { $('#header-bar a.close').removeClass('activated'); });*/ }); $(window).resize(function() { calcHeight(); }).load(function() { calcHeight(); }); </script> </head> <body> <iframe id="preview-frame" src="https://oatweb1.myshopify.com/" name="preview-frame" frameborder="0" noresize="noresize" style="height: 902px;"> </iframe> </body> </html> |
Tem que ser JS para que no resize, o conteúdo do iframe ative o responsivo do embed. Tentei outras formas, somente o CSS, mas o iframe fazia o resize, mas o conteúdo não se adaptava para o celular.
Fonte: https://gist.github.com/leowebguy/a16c66f98fe8f1daa0ba
Me ajudouuu muito, tava com problema de rodar um iframe, pois no celular ele não ficava responsivo.. agora tá 100%!! obrigado por compartilhar conhecimento. Loguei só pra agradecer… gratidão!