JavaScript

Resize Iframes seamlessly

An solution to resize iframes seamlessly in the page. The Iframes can be on same domain or cross domain.

Resize Iframes seamlessly

Recently I came across a very interesting solution to resize iframes seamlessly in the page. Iframes can be on same domain or cross domain. Its iframe-resizer maintained by David J. Bradshaw.

This solution works with the cross-document messaging; window.postMessage (IE8+). Though for IE8 support, ie8 polyfill(supplied with plugin) would need to used.

Only requirement is that the iframe.contentWindow.js (supplied with plugin) is needed to be included in the iframe'd page.

For IE8 conditional script can be used as follows:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!--[if lte IE 8]>
        <script type="text/javascript" src="js/ie8.polyfils.min.js"></script>
    <![endif]-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  </body>
</html>

For minimal setup, you would need to call the

<!DOCTYPE html>
<html>
<head>
  <title>Iframe Resizer</title>
  <style>iframe{width:100%}</style>
</head>
<body>
  <iframe src="http://anotherdomain.com/iframedPage.html" scrolling="no"></iframe>
  <script>iFrameResize({log:true})</script>
  <!--put log:false to turn off the logging-->
</body>
</html>

And in iframedPage.html should have the iframeResizer.contentWindow(.min).js

Demo Github npm Download

You've successfully subscribed to Time to Hack!