5

ここで最初のタイマー！

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>

4

1 に答える 1