5

第一次来这里！

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

行为如下：

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

  • 当视图 > 显示状态栏的常规 Safari 设置启用时，对话框将呈现在所需的高度。当状态栏被禁用时，对话框以不正确的高度呈现。

附加信息

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

  • Safari 8 和 6.2 有时会在第一次打开对话框时报告不正确的值（见屏幕截图）。右键单击页面并选择“重新加载”时，页面会以正确的值刷新。

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

CODE - 启动模式对话框的测试页面。

<!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>

4

1 回答 1

0

window.showModalDialog 与 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>

于 2014-12-16T13:48:39.670 回答