Fatal编程技术网
  • javascript/
  • Javascript-iPhone中当前iframe的大小错误

Javascript-iPhone中当前iframe的大小错误

javascript html css

Javascript-iPhone中当前iframe的大小错误,javascript,html,css,Javascript,Html,Css,这是一个更大问题的孤立。我正在使用一个包含iframe的父窗口 当我在我的Androidmobile（用Chrome测试）上运行以下代码时，我得到了一个弹出窗口，显示的300300，与预期一致。在我的桌面电脑上也会发生同样的情况（无论使用何种浏览器：Firefox、Chrome等） 但是当我对IPhone/Safari或IPhone/Chrome做同样的操作时，我得到：700700 我需要在我的IPhone上获得：300300，独立于我设置为.frame的大小。换句话说，我需要在父窗口上设置视口

这是一个更大问题的孤立。我正在使用一个包含
iframe
的父窗口

当我在我的
Android
mobile（用Chrome测试）上运行以下代码时，我得到了一个弹出窗口，显示的
300300
，与预期一致。在我的桌面电脑上也会发生同样的情况（无论使用何种浏览器：Firefox、Chrome等）

但是当我对
IPhone/Safari
或
IPhone/Chrome
做同样的操作时，我得到：
700700

我需要在我的
IPhone
上获得：
300300
，独立于我设置为
.frame
的大小。换句话说，我需要在父窗口上设置视口的大小

如果您想快速尝试我这里的意思（
Android或Desktop
vs
iPhone
），您可以运行以下示例，您将在
iPhone
上看到：
700700
应该在哪里
300300
：

var content\u iframe=''+
''+
''+
''+
''+
“IFrame”+
''+
'正文，html{'+
'边距：0；'+
'填充：0；'+
'溢出：隐藏；'+
'}'+
“.frame{”+
'位置：绝对；'+
'width:700px；'+//我需要忽略它！
'height:700px；'+//我需要忽略它！
'}'+
''+
''+
'设置超时（函数（）{'+
'var width=window.innerWidth；'+
'var height=window.innerHeight；'+
'警告（宽度+，“+高度）；'+
'}, 500);'+
''+
''+
''+
'	'+
''+
'';
document.getElementById（'test_iframe'）.src=“data:text/html；charset=utf-8，”+escape（content_iframe）

iframe{
/*这就是我需要的输出*/
边界：无；
宽度：300px；
高度：300px；
背景色：#e9f1ff；
}


再次检查此代码：


var content_iframe = '<!DOCTYPE html>'+
'<html>'+ 
'<head>'+
'<meta name="viewport" content="width=device-width, initial-scale=1" \/>'+ 
'<meta charset="UTF-8" \/>'+
'<title>IFrame<\/title>'+
'<style type="text\/css">'+
'body, html {'+
'   margin: 0;'+ 
'   padding: 0;'+ 
'   overflow: hidden;'+ 
'}'+ 
'.frame {'+ 
'   position: absolute;'+ 
'   width: 700px;'+  // I need this to be ignored! '    
height: 700px;'+ // I need this to be ignored! '}'+ 
'.main {'+ '    
width: 300px;'+  // I need this to be ignored! '    
height: 300px;'+ // I need this to be ignored! '}'+ 
'<\/style>'+ 
'<script type="text\/javascript">'+ 
'setTimeout(function(){'+ 
'   var width = document.getElementById("main").offsetWidth;'+ '    
var height = document.getElementById("main").offsetHeight;'+ '  
alert(width + 
" , " + 
height);'+ 
'}, 500);'+ 
'<\/script>'+ 
'<\/head>'+ 
'<body>'+ 
'<div id="main" class="main">   <div class="frame"><\/div>  </div>'+ 
'<\/body>'+ 
'<\/html>'; 
document.getElementById('test_iframe').src = "data:text/html;charset=utf-8," + escape(content_iframe);



检查框架主体而不是窗户


<script type="text/javascript">
setTimeout(function(){
    var width = document.querySelector('body').offsetWidth;
    var height = document.querySelector('body').offsetHeight;
    alert(width + ' , ' + height);
}, 500);
</script>




setTimeout（函数（）{
var width=document.querySelector（'body'）.offsetWidth；
var height=document.querySelector（'body'）。offsetHeight；
警报（宽度+'、'+高度）；
}, 500);

你应该测试body.innerWidthgetting:
ReferenceError:body未定义
文档。querySelector（'body'）。InnerWidthTested在我的iPhone上得到了：
700,0
，在我的桌面电脑上得到了
300,0
，在我的iPhone上得到了
700,700
<但是，在我的桌面上，代码>300300
。请再次检查@DavidSmith 
iframe {
  /* this is what I need to be output */
    border: none;
    width: 300px;
    height: 300px;
    background-color: #e9f1ff;
}

<script type="text/javascript">
setTimeout(function(){
    var width = document.querySelector('body').offsetWidth;
    var height = document.querySelector('body').offsetHeight;
    alert(width + ' , ' + height);
}, 500);
</script>