javascript - 缩放 iframe 内容

Question

我正在努力调整 iframe content 的大小(在固定大小的 iframe 中)。 IE。我希望它的内容变小/变大，就好像浏览器的缩放比例发生了变化一样。从 css 实验中，我觉得可以通过定义 iframe 页面大小并将其重新缩放到固定窗口尺寸来实现。但我无法在 javascript 中复制。任何帮助表示赞赏。

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>

Answer 1

如果 iframe 源是不同的域，那你就不走运了。如果是这种情况，您将无法添加 CSS。如果感兴趣，请搜索问题和原因。

最好的备选方案可能是更改 iframe 容器的大小、iframe 本身，或者缩放 iframe。以下是缩放 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.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="//api.gdeltproject.org/api/v2/doc/doc?query=christmas&mode=ArtList&maxrecords=15&timespan=24h"></iframe>
</div>