Fork me on GitHub
Dyframe
Dynamically render responsive HTML into iframe.
dyframe.js
dyframe.min.js
HTML source
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Awesome Site</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.min.css"> <style> body { padding-top: 70px; } h1 { margin-bottom: 20px; } h2 { margin-top: 30px; } .container { margin-bottom: 20px; } .col-sm-4 h3 { margin-top: 0; } </style> </head> <body> <div class="container"> <nav class="navbar navbar-inverse navbar-fixed-top"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Awesome Site</a> </div> <div class="collapse navbar-collapse" id="navbar-collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> </ul> </div> </div> </nav> <h1 class="text-center">Welcome to Awesome Site!</h1> <p class="text-center"> <img src="kitten.jpg" alt="" width="240" height="240" class="img-circle"> </p> <h2>About</h2> <p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur nibh augue, fermentum condimentum lobortis ac, mollis ut odio. Mauris dignissim nec ligula sit amet hendrerit. Morbi sed massa non nisl lacinia pharetra vitae non felis. Integer pulvinar ornare odio, non facilisis est interdum id.</p> <h2>Friends</h2> <div class="row"> <div class="col-sm-4"> <h3>Tom</h3> <p>Interdum et malesuada fames ac ante ipsum primis in faucibus. Nullam commodo maximus lectus ac cursus. Donec malesuada tortor nibh, vel imperdiet purus facilisis ut. Praesent vulputate quam sed metus maximus mattis.</p> </div> <div class="col-sm-4"> <h3>Jerry</h3> <p>Duis diam nisl, viverra id sagittis sed, ultricies in lorem. Cras tellus tellus, sagittis non commodo sit amet, sagittis id dolor. Aliquam non blandit enim, nec interdum est.</p> </div> <div class="col-sm-4"> <h3>Spike</h3> <p>Nulla vehicula, metus quis malesuada cursus, velit quam aliquam eros, ac pulvinar turpis velit quis nisi. Cras non volutpat lectus. Nam ut lacus luctus, tempor lectus vel, blandit ex. Aliquam vitae nibh mi.</p> </div> </div> <hr> <p class="text-center text-muted">Copyright (c) 2015 Awesome Site</p> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/js/bootstrap.min.js"></script> </body> </html>
Dyframe Documentation