Safari 8 中新打开的对话框的高度不正确

Height of newly opened dialog in Safari 8 is incorrect

本文关键字：对话框 不正确 高度 新打开 Safari      更新时间：2023-09-26

第一次定时器在这里！

在Mac OS Yosemite中使用Safari 8时，我看到一些不良行为与使用JS函数window.showModalDialog((创建的对话框的高度有关。这是浏览器错误还是其他原因？我希望能够在所有浏览器中以一致的高度打开对话框，而无需对 Safari 8 进行条件设置。

行为如下所示：

  • 显示新模态时，其高度小于预期。如果我右键单击模式的顶部区域并选择"自定义工具栏"，则会恢复正确的高度。单击自定义选项的"完成"时，窗口可能会再次增加高度，这次显示的高度超过预期。

  • 启用"查看>显示状态"栏的常规 Safari 设置后，对话框将以所需的高度呈现。禁用状态栏时，对话框将以不正确的高度呈现。

附加信息

  • 带有说明的屏幕截图：http://imgur.com/KqrHZs4

  • Safari 8 和 6.2 有时会在首次打开对话框时报告不正确的值(请参阅屏幕截图(。右键单击页面并选择"重新加载"时，页面将使用正确的值刷新。

  • 我认为不可能隐藏URL栏，我认为这是与窗口高度空间相关的问题的一部分。

代码 - 启动模式对话框的测试页。

<!DOCTYPE html>
<html>
<head>
<title>Testing Modal Dialog Heights</title>
<script type="text/javascript">
function openModal()
{
	var url = "modal.html";
	var args = null;
	var features = "resizable:no;scroll:no;status:no;center:yes;help:no;dialogwidth:400px;dialogheight:400px";
	
	window.showModalDialog(url, args, features);
	
}
</script>
</head>
<body>
<button onclick="openModal()">Open Modal</button>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<title>This is the modal</title>
<style type="text/css">
body
{
	width:100%;
	height:100%;
}
#Results
{
	position:absolute;
	top:0;
	right:0;
	bottom:0;
	left:0;
}
</style>
<script type="text/javascript">
window.onload = doOnLoad;
function doOnLoad()
{
	
	window.menubar.visible = false;
	window.locationbar.visible = false;
	window.toolbar.visible = false;
	window.statusbar.visible = false;
	window.personalbar.visible = false;
	
	/* Test one */
	var pResults = document.getElementById("Results");
	pResults.innerHTML +=  "clientHeight: " + pResults.clientHeight + "<br />";
	pResults.innerHTML +=  "clientWidth: " + pResults.clientWidth + "<br /><br />";
	pResults.innerHTML +=  "offsetHeight: " + pResults.offsetHeight + "<br />";
	pResults.innerHTML +=  "offsetWidth: " + pResults.offsetWidth + "<br /><br />";
	
	
	/* Test two */
	var pResults = document.getElementById("Results");
	pResults.innerHTML +=  "window.innerHeight: " + window.innerHeight + "<br />";
	pResults.innerHTML +=  "window.innerWidth: " + window.innerWidth + "<br /><br />";
	pResults.innerHTML +=  "window.outerHeight: " + window.outerHeight + "<br />";
	pResults.innerHTML +=  "window.outerWidth: " + window.outerWidth + "<br /><br />";
	
	pResults.innerHTML +=  "window.devicePixelRatio: " + window.devicePixelRatio + "<br />";
	pResults.innerHTML +=  "window.locationbar.visible: " + window.locationbar.visible + "<br />";
	pResults.innerHTML +=  "window.menubar.visible: " + window.menubar.visible + "<br />";
	pResults.innerHTML +=  "window.toolbar.visible: " + window.toolbar.visible + "<br />";
	pResults.innerHTML +=  "window.statusbar.visible: " + window.statusbar.visible + "<br />";
	pResults.innerHTML +=  "window.personalbar.visible: " + window.personalbar.visible + "<br />";
}
</script>
</head>
<body>
<div id="Results">Modal coded to be 400H, 400H. <br /> <br /></div>
</body>
</html>

window.showModalDialog vs. window.open

Intenet Explorer 接缝是唯一实现 showmodaldialog 的接缝。所以相反，我会使用window.open

$('#buttonID').click(function(){ 
    window.open("http://www.somedomain.com/index.php?param1="+param1+"param2="+param2, "_blank");
});

然后使用一些 PHP 来处理下一页

<?php
$param1 = $_GET['param1'];
$param2 = $_GET['param2'];
?>
<p>Some type of something: <?= $param1 ?></p>
<p>Some type of something: <?= $param2 ?></p>

相关文章：