Question

我正在努力调整iframe 内容（在固定大小的iframe中）。即我希望它的内容变得更小/更大，就像浏览器的缩放更改一样。从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本身或scale 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>

缩放iframe内容

1 个答案: