Javascript Iframe仅在Safari重新加载时消失
我遇到了一个奇怪的问题，我希望是一个简单的解决办法。我只是在尝试HTML、CSS和JavaScript。我试图通过页面加载时触发的JavaScript和CSS动态调整iframe内容的大小。下面的代码在Chrome和Edge中非常有效，但在Safari中仅部分有效 在safari中加载第一页后，iframe的大小和加载正确无误。但是，如果我点击浏览器上的刷新按钮，Iframe将消失。真正奇怪的是，比如说，在IPhone上，我让屏幕进入睡眠状态。然后唤醒手机并在safari中重新加载页面，iframe随后再次显示 我知道下面的代码不是最干净的。这真的只是我天真的尝试使Iframe完全适合浏览器窗口的大小。iframe源是一个已发布的google工作表，已知内容宽度为1900px，高度为1250px。救命啊Javascript Iframe仅在Safari重新加载时消失,javascript,html,css,iframe,safari,Javascript,Html,Css,Iframe,Safari,我遇到了一个奇怪的问题，我希望是一个简单的解决办法。我只是在尝试HTML、CSS和JavaScript。我试图通过页面加载时触发的JavaScript和CSS动态调整iframe内容的大小。下面的代码在Chrome和Edge中非常有效，但在Safari中仅部分有效 在safari中加载第一页后，iframe的大小和加载正确无误。但是，如果我点击浏览器上的刷新按钮，Iframe将消失。真正奇怪的是，比如说，在IPhone上，我让屏幕进入睡眠状态。然后唤醒手机并在safari中重新加载页面，ifra
<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>
#包裹{
宽度：912px；
高度：600px；
填充：0；
}
#框架{
宽度：1900px；
高度：1250px；
边界：0；
-ms变换：标度（0.48）；
-moz变换：比例（0.48）；
-o变换：标度（0.48）；
-webkit变换：比例（0.48）；
变换：比例（0.48）；
-ms变换原点：0；
-moz变换原点：0；
-o变换原点：0；
-webkit转换原点：0；
变换原点：0；
}
函数ss（）{
var sw=窗内宽度；
var sh=窗内高度；
var swp=sw/1900；
var swpr=数学四舍五入（swp*100）/100；
var shp=swpr*sh；
var shpr=数学四舍五入（shp）；
document.getElementById（“wrap”）.style.width=sw；
document.getElementById（“wrap”）.style.height=shpr；
document.getElementById（“frame”）.style.webkittTransform=“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+）”；
}
在第一个视图中看不到错误。你可以试着放一个
console.log（“foo”）ss（）