ASt*_*ock 5 html javascript safari modal-dialog showmodaldialog
第一个计时器!
我在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>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>