I am having difficulty adjusting the size of the iframe content (within a fixed-sized iframe). Essentially, I would like the content to scale smaller or larger as if the browser's zoom function was being used. Through my CSS experiments, it seems achievable by specifying the size of the iframe page and then resizing it to fit the fixed window dimensions. However, I am unable to replicate this using JavaScript. Any help would be greatly 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.com/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>