I'm struggling to resize iframe content (within a fixed-sized iframe). I.e. I want its content to get smaller/bigger as if the browser's zoom was changed. From css experimentation I get the sense it's possible by defining the iframe page size and rescaling it to the fixed window dimensions. But I can't replicate in javascript. Any assistance appreciated.

var w = $(window).width() * .7;
var h = $(window).height() * .7;
$('#myiframe').width(w + 'px').height(h + 'px');

function zoom(x) {
  console.log(w * x, h * x);
  // document.getElementById("myiframe").width(w).height(h);
  // document.getElementById("myiframe").style.transform = 'scale(' + z + ',' + z + ')';
}

body {
  background-color: #ccc;
  overflow: hidden;
}

#iframe_container {
  background-color: pink;
  width: 70vw;
  height: 70vh;
  padding: 0;
  overflow: hidden;
}

#myiframe {
  overflow: scroll;
  border: 0;
  -ms-transform: scale(0.25);
  -moz-transform: scale(0.25);
  -o-transform: scale(0.5);
  -webkit-transform: scale(1);
  transform: scale(1);
  -ms-transform-origin: 0 0;
  -moz-transform-origin: 0 0;
  -o-transform-origin: 0 0;
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
}

button {
  display: inline-block;
}

<script src=".1.1/jquery.min.js"></script>
<button type="button" onclick="zoom(1)">- ZOOM OUT</button>
<button type="button" onclick="zoom(-1)">+ ZOOM IN</button>
<br>
<div id="iframe_container">
  <iframe id="myiframe" src="./iframe.html"></iframe>
</div>

I'm struggling to resize iframe content (within a fixed-sized iframe). I.e. I want its content to get smaller/bigger as if the browser's zoom was changed. From css experimentation I get the sense it's possible by defining the iframe page size and rescaling it to the fixed window dimensions. But I can't replicate in javascript. Any assistance appreciated.

var w = $(window).width() * .7;
var h = $(window).height() * .7;
$('#myiframe').width(w + 'px').height(h + 'px');

function zoom(x) {
  console.log(w * x, h * x);
  // document.getElementById("myiframe").width(w).height(h);
  // document.getElementById("myiframe").style.transform = 'scale(' + z + ',' + z + ')';
}

body {
  background-color: #ccc;
  overflow: hidden;
}

#iframe_container {
  background-color: pink;
  width: 70vw;
  height: 70vh;
  padding: 0;
  overflow: hidden;
}

#myiframe {
  overflow: scroll;
  border: 0;
  -ms-transform: scale(0.25);
  -moz-transform: scale(0.25);
  -o-transform: scale(0.5);
  -webkit-transform: scale(1);
  transform: scale(1);
  -ms-transform-origin: 0 0;
  -moz-transform-origin: 0 0;
  -o-transform-origin: 0 0;
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
}

button {
  display: inline-block;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" onclick="zoom(1)">- ZOOM OUT</button>
<button type="button" onclick="zoom(-1)">+ ZOOM IN</button>
<br>
<div id="iframe_container">
  <iframe id="myiframe" src="./iframe.html"></iframe>
</div>

• javascript
• css
• iframe

• My final code (HT to Brett) - jsfiddle/geotheory/zoLq1t5f – geotheory Commented Dec 24, 2017 at 0:55

1 Answer 1

If the iframe source is a different domain, you're out of luck. You won't be able to add CSS if that's the case. Search for the issues and reasons if interested.

The best alternative option might be to change the size of the iframe container, the iframe itself, or scale the iframe. Here's how the scale the iframe:

var w = $(window).width();
var h = $(window).height();
var scale = 1;

function zoom(x) {
  if (x === -1) {
    scale = scale * 1.1;
    w = w * 0.9;
    h = h * 0.9;
    $("#myiframe").width(w + "px");
    $("#myiframe").height(h + "px")
  } else {
    scale = scale * 0.9;
    w = w * 1.1;
    h = h * 1.1;
    $("#myiframe").width(w + "px");
    $("#myiframe").height(h + "px")
  }

  $('#myiframe').css('transform', `scale(${scale})`);
}

html,
body {
  background-color: #ccc;
  overflow: hidden;
  height: 100%;
  width: 100%;
}

#iframe_container {
  background-color: #ffffff;
  padding: 0;
  height: 100%;
  width: 100%;
  overflow: visible;
}

#myiframe {
  overflow: scroll;
  border: 0;
  width: 100%;
  height: 100%;
  transform: scale(1);
  -ms-transform-origin: 0 0;
  -moz-transform-origin: 0 0;
  -o-transform-origin: 0 0;
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
}

button {
  display: inline-block;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" onclick="zoom(1)">- ZOOM OUT</button>
<button type="button" onclick="zoom(-1)">+ ZOOM IN</button>
<br>
<div id="iframe_container">
  <iframe id="myiframe" src="//api.gdeltproject/api/v2/doc/doc?query=christmas&mode=ArtList&maxrecords=15&timespan=24h"></iframe>
</div>