Question

我正在制作一个带有两个iframe的网页，在平板电脑和手机上有双窗口的项目，我认为这是一项轻松的工作，但问题超出了预期。该网站在Windows浏览器Chrome上正常工作。在介绍问题之前，我将提供代码和网站的链接。 http://lotav.com/v1这个iframe的高度为45％。 http://lotav.com/v2这个代码具有相同的代码，唯一的区别是高度固定为200px。 lotav.com/v1的代码如下：

<!DOCTYPE html>
<html style="height: 100%;min-height:100%;">
<head>
<meta name="viewport" content="width=device-width">
<script>
function setURL(url){
    var url=prompt("Please enter your url:","http://");
    document.getElementById('upper').src = url;
}
function setURL2(url2){
    var url2=prompt("Please enter your url:","http://");
    document.getElementById('lower').src = url2;
}
</script>
<title>Dual Window</title>
<body style="height:98%;min-height:98%;max-height:98%;">
<input Value="Upper" type="button" onclick="setURL();" />
<input Value="Lower" type="button" onclick="setURL2();" />
<iframe id="upper" width="100%" height="45%" src="http://ejarwall.com" sandbox="allow-same-origin">
  <p>Your browser does not support iframes.</p>
</iframe>
<iframe id="lower" width="100%" height="45%" src="http://ejarwall.com" sandbox="allow-same-origin">
  <p>Your browser does not support iframes.</p>
</iframe>
</body>
</head>
</html>

对于lotav.com/v2

<!DOCTYPE html>
<html style="height: 100%;min-height:100%;">
<head>
<meta name="viewport" content="width=device-width">
<script>
function setURL(url){
    var url=prompt("Please enter your url:","http://");
    document.getElementById('upper').src = url;
}
function setURL2(url2){
    var url2=prompt("Please enter your url:","http://");
    document.getElementById('lower').src = url2;
}
</script>
<title>Dual Window</title>
<body style="height:98%;min-height:98%;max-height:98%;">
<input Value="Upper" type="button" onclick="setURL();" />
<input Value="Lower" type="button" onclick="setURL2();" />
<iframe id="upper" width="100%" height="200pxhttp://www.autotrader.com/cars-for-sale/" src="http://ejarwall.com" sandbox="allow-same-origin">
  <p>Your browser does not support iframes.</p>
</iframe>
<iframe id="lower" width="100%" height="200px" src="http://www.autotrader.com/cars-for-sale/" sandbox="allow-same-origin">
  <p>Your browser does not support iframes.</p>
</iframe>
</body>
</head>
</html>

当你选择make the model选项打开时，在自动交易者查找页面上有一个下拉列表菜单，我想这是由Ajax完成的我只面对移动设备和平板电脑浏览器所遇到的问题，它在PC上运行良好。

问题是： 1）Android浏览器4.2， iframe高度OK，下拉列表有效 Ajax下拉列表不会重演，

2）Android 4.2上的Chrome，高度45％工作正常，正常下拉工作正常， Ajax下拉没有反应！..

3）Android 4.1浏览器，不打开正常的下拉列表，并确保Ajax不起作用，高度45％工作正常..

4）iPhone和iPad上的Safari新版本，初始它显示高度45％，当页面加载时，它加载整个页面并忽略45％，它显示了正常的下拉列表，对于重新执行Ajax下拉列表没有反应，在修复高度（lotav.com/v2）上，它也忽略了像素中的固定高度。

5）关于android 12.10上的opera classic 它忽略了iframe的固定高度和百分比高度它显示正常下拉并重新执行Ajax下拉列表.. 关于网站的一个简短的想法，上层将请求一个网址将其加载到上层iframe中，下方输入按钮将请求一个网址将其加载到下层iframe中..所有JavaScripts工作正常..整个网站工作正常在PC上很好..我也知道有无用的css，如最小和最大高度，但如果他们在那里，它没有什么区别。我对这个问题进行了长时间的搜索，但似乎没有针对手机和平板电脑浏览器的iframe。感谢阅读:)我希望这对其他人有益。

移动设备和平板电脑浏览器上的<iframe> </iframe>

0 个答案: