jormaturkenburg · May 28, 2018 10:00
diff --git a/readme.md b/readme.md
diff --git a/iframe.html b/iframe.html
 <!DOCTYPE html>
 <html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>iFrame</title>
  <script src="iframe.js"></script>
 </head>
 <body>
  <div class="wrapper">
    <p>Inspect anything brought into the house. Give me attention or face the wrath of my claws leave fur on owners clothes purr for no reason under the bed leave dead animals as gifts. Lounge in doorway purr when being pet knock dish off table head butt cant eat out of my own dish.</p>
    <p> Annoy owner until he gives you food say meow repeatedly until belly rubs, feels good leave fur on owners clothes, so sniff other cat's butt and hang jaw half open thereafter or why must they do that, or rub whiskers on bare skin act innocent jump around on couch, meow constantly until given food.</p>
    <p>Why must they do that.</p>
  </div>
 </body>
 </html>
diff --git a/iframe.js b/iframe.js
 // Polyfill for older browsers
 if (!Array.prototype.filter){
  Array.prototype.filter = function(func, thisArg) {
    'use strict';
    if ( ! ((typeof func === 'Function' || typeof func === 'function') && this) )
        throw new TypeError();
   
    var len = this.length >>> 0,
        // Preallocate array
        res = new Array(len),
        t = this, c = 0, i = -1;
    if (thisArg === undefined){
      while (++i !== len){
        // Checks to see if the key was set
        if (i in this){
          if (func(t[i], i, t)){
            res[c++] = t[i];
          }
        }
      }
    } else {
      while (++i !== len){
        // Checks to see if the key was set
        if (i in this){
          if (func.call(thisArg, t[i], i, t)){
            res[c++] = t[i];
          }
        }
      }
    }
   
    res.length = c; // Shrink down array to proper size
    return res;
  };
 }

 (function(global) {

  global.onload = function(event) {
    // The main HTML element in the R Shiny dashboard is a div
    // with class wrapper and is a child node of body
    var nodeList = document.body.childNodes;

    // Convert the returned NodeList object to an actual array
    var nodes = Array.prototype.slice.call(nodeList);

    // Filter our list to only the elements with class wrapper
    var list = nodes.filter(function(el) {return el.className === 'wrapper';});
    
    // Check that we in fact received any elements
    if (list.length === 1) {

      // Get our wrapper element from the list
      var wrapper = list[0];

      // Create function to bind to resize event
      var sendMessage = function() {

        // Create message to send to parent
        var message = {
          id: 'sizeEvent',
          scrollHeight: wrapper.scrollHeight,
          scrollWidth: wrapper.scrollWidth,
          // Convert DomRect to a plain object
          boundingRect: Object.assign({}, wrapper.getBoundingClientRect().toJSON()),
          offsetHeight: wrapper.offsetHeight,
          offsetWidth: wrapper.offsetWidth
        };
        // console.log(message);

        // Send message
        parent.postMessage(message,"*");
      };

      // Bind function to resize event
      global.onresize = function(event) {
        sendMessage();
      };

      // Send message once for initial sizing
      sendMessage();
    }
  }

 })(this);
diff --git a/parent.html b/parent.html
 <!DOCTYPE html>
 <html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>Parent</title>
  <style>
    .responsive-iframe {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
    }
    .iframe-wrapper {
      width: 100%;
      position: relative;
    }
  </style>
 </head>
 <body>
  <div class="main">
    <p>Lorem Ipsum and so on...</p>
    <div class="iframe-wrapper">
      <iframe id="r-shiny-iframe" class="responsive-iframe" src="iframe.html" frameborder="1"></iframe>
    </div>
  </div>
  <script src="parent.js"></script>
 </body>
 </html>
diff --git a/parent.js b/parent.js
 (function(global) {

  // Create IE + others compatible event handler
  var eventMethod = global.addEventListener ? "addEventListener" : "attachEvent";
  var eventer = global[eventMethod];
  var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message";

  // Listen to message from child window
  eventer(messageEvent, function(event) {
    var data = event.data;
    if (data && data.id === 'sizeEvent') {

      // Get height from the bounding rectangle
      // which isn't rounded and round it up
      var height = Math.ceil(data.boundingRect.height);

      // Add magic value to height
      // Body has a top and bottom margin of 8
      height = height + 32;
      document.getElementById('r-shiny-iframe').height = height + 'px';
    }
  }, false);
 })(this);
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>iFrame</title>
	<script src="iframe.js"></script>
	</head>
	<body>
	<div class="wrapper">
	<p>Inspect anything brought into the house. Give me attention or face the wrath of my claws leave fur on owners clothes purr for no reason under the bed leave dead animals as gifts. Lounge in doorway purr when being pet knock dish off table head butt cant eat out of my own dish.</p>
	<p> Annoy owner until he gives you food say meow repeatedly until belly rubs, feels good leave fur on owners clothes, so sniff other cat's butt and hang jaw half open thereafter or why must they do that, or rub whiskers on bare skin act innocent jump around on couch, meow constantly until given food.</p>
	<p>Why must they do that.</p>
	</div>
	</body>
	</html>
	// Polyfill for older browsers
	if (!Array.prototype.filter){
	Array.prototype.filter = function(func, thisArg) {
	'use strict';
	if ( ! ((typeof func === 'Function' \|\| typeof func === 'function') && this) )
	throw new TypeError();

	var len = this.length >>> 0,
	// Preallocate array
	res = new Array(len),
	t = this, c = 0, i = -1;
	if (thisArg === undefined){
	while (++i !== len){
	// Checks to see if the key was set
	if (i in this){
	if (func(t[i], i, t)){
	res[c++] = t[i];
	}
	}
	}
	} else {
	while (++i !== len){
	// Checks to see if the key was set
	if (i in this){
	if (func.call(thisArg, t[i], i, t)){
	res[c++] = t[i];
	}
	}
	}
	}

	res.length = c; // Shrink down array to proper size
	return res;
	};
	}

	(function(global) {

	global.onload = function(event) {
	// The main HTML element in the R Shiny dashboard is a div
	// with class wrapper and is a child node of body
	var nodeList = document.body.childNodes;

	// Convert the returned NodeList object to an actual array
	var nodes = Array.prototype.slice.call(nodeList);

	// Filter our list to only the elements with class wrapper
	var list = nodes.filter(function(el) {return el.className === 'wrapper';});

	// Check that we in fact received any elements
	if (list.length === 1) {

	// Get our wrapper element from the list
	var wrapper = list[0];

	// Create function to bind to resize event
	var sendMessage = function() {

	// Create message to send to parent
	var message = {
	id: 'sizeEvent',
	scrollHeight: wrapper.scrollHeight,
	scrollWidth: wrapper.scrollWidth,
	// Convert DomRect to a plain object
	boundingRect: Object.assign({}, wrapper.getBoundingClientRect().toJSON()),
	offsetHeight: wrapper.offsetHeight,
	offsetWidth: wrapper.offsetWidth
	};
	// console.log(message);

	// Send message
	parent.postMessage(message,"*");
	};

	// Bind function to resize event
	global.onresize = function(event) {
	sendMessage();
	};

	// Send message once for initial sizing
	sendMessage();
	}
	}

	})(this);
	(function(global) {

	// Create IE + others compatible event handler
	var eventMethod = global.addEventListener ? "addEventListener" : "attachEvent";
	var eventer = global[eventMethod];
	var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message";

	// Listen to message from child window
	eventer(messageEvent, function(event) {
	var data = event.data;
	if (data && data.id === 'sizeEvent') {

	// Get height from the bounding rectangle
	// which isn't rounded and round it up
	var height = Math.ceil(data.boundingRect.height);

	// Add magic value to height
	// Body has a top and bottom margin of 8
	height = height + 32;
	document.getElementById('r-shiny-iframe').height = height + 'px';
	}
	}, false);
	})(this);