Javascript Image Preview
So I was working on an live website previewer for a website; however, I found out that it is actually extremely bad and you can get attacked very easy (using iframes and what not). Is this true?
Here is the example: http://jsbin.com/busefimahi/1/edit?output
Also, is there a way to prevent redirects. (EG over value two Ill post the code below)
sandbox="" to prevent redirects
But my main question is doing a live preview like this a good idea? (I know that https and http websites cant cross and most websites wont work with iframes)Code:<!DOCTYPE html> <html> <head> <script src="https://code.jquery.com/jquery-1.11.3.js"></script> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> <script> var enter = false; $(document).on({ mouseenter:function(){ var srcx = $(this).attr('href'); app = '<div id="preview"><img src="http://www.chimply.com/coconut/images/955666"/><iframe sandbox=""></iframe></div>'; if($('#preview').length === 0){ $('body').append(app); } $('#preview>iframe').attr('src',srcx); $('#preview>iframe').load(function(){ $(this).parent().children('img').css('display','none'); $(this).fadeIn(200); }); }, mousemove:function(e){ $('#preview').css('left',e.pageX+10+'px'); $('#preview').css('top',e.pageY+10+'px'); }, mouseleave:function(){ $("#preview").remove(); } },'.box'); function la(x){ $('#l').append(x); } function lt(x){ $('#l').text(x); } </script> <style> #preview { position:absolute; } #preview>iframe { display:none; } </style> </head> <body> <div id=l></div> <a href="http://thebcelements.com/" target=_blank class=box> Checking </a> <br /> <a href="http://phpfiddle.org/" target=_blank class=box> Two </a> </body> </html>
CSS Codes
Reply With Quote
Bookmarks