Question

我遇到一个奇怪的问题，我希望这是一个简单的修复。我只是在HTML，CSS和JavaScript上蘸着我的脚趾。我正在尝试通过JavaScript和CSS在页面加载时触发来动态调整我的iframe内容。下面的代码在Chrome和Edge中效果很好，但只部分在Safari中使用。

首次加载safari时，iframe的大小和加载都没有问题。但是，如果我点击浏览器上的刷新按钮，Iframe就会消失。如果真的很奇怪，例如，如果在iPhone上，我会让我的屏幕进入睡眠状态。然后唤醒手机并在Safari中重新加载页面iframe，然后再次显示。

我知道下面的代码不是最干净的。它真的只是我尝试使iframe完全适合浏览器窗口的大小。 iframe源是已发布的Google工作表，其内容宽度为1900像素，高度为1250像素。请帮忙！

<html>
<head>
<meta charset="utf-8" />




<style>
    #wrap {
        width: 912px;
        height: 600px;
        padding: 0;
    }

    #frame {
        width: 1900px;
        height: 1250px;
        border: 0;
        -ms-transform: scale(0.48);
        -moz-transform: scale(0.48);
        -o-transform: scale(0.48);
        -webkit-transform: scale(0.48);
        transform: scale(0.48);
        -ms-transform-origin: 0 0;
        -moz-transform-origin: 0 0;
        -o-transform-origin: 0 0;
        -webkit-transform-origin: 0 0;
        transform-origin: 0 0;
    }
</style>

</head>
<body onload="ss()">

<div id="wrap">

    <iframe id="frame" src="insert_iframe_here"></iframe>

</div>



<script>
function ss() {
      var sw = window.innerWidth;
      var sh = window.innerHeight;
      var swp = sw / 1900;
      var swpr = Math.round(swp * 100) / 100;
      var shp = swpr * sh;
      var shpr = Math.round(shp);

      document.getElementById("wrap").style.width = sw;
      document.getElementById("wrap").style.height = shpr;
      document.getElementById("frame").style.webkitTransform = "scale(" + swpr + ")";
      document.getElementById("frame").style['-ms-transform'] = "scale(" + swpr + ")";
      document.getElementById("frame").style.transform = "scale(" + swpr + ")";
      document.getElementById("frame").style['-moz-transform'] = "scale(" + swpr + ")";
      document.getElementById("frame").style['-o-transform'] = "scale(" + swpr + ")";
  }
</script>

iframe仅在Safari Reload上消失

0 个答案: