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

Share Improve this question Follow edited Dec 23, 2017 at 17:53 Brett DeWoody 62.9k3131 gold badges144144 silver badges192192 bronze badges asked Dec 23, 2017 at 17:44 geotheorygeotheory 23.7k2929 gold badges125125 silver badges202202 bronze badges 1

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

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

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>