2014-12-02 13 views
5

ersten Timer hier!Höhe des neu geöffneten Dialogs in Safari 8 ist falsch

ich einige unerwünschte Verhalten sehe, wenn Safari 8 in Mac OS Yosemite auf dem Höhepunkt der Dialoge mit der JS-Funktion window.showModalDialog() erstellt im Zusammenhang mit. Ist das ein Browser Bug oder etwas anderes? Ich möchte in der Lage sein, Dialoge mit gleichbleibender Höhe, ohne dass in allen Browsern zu öffnen für Safari konditionalisieren 8.

Das Verhalten ist wie folgt:

  • Wenn eine neue modale Anzeige, dessen Höhe geringer als erwartet. Wenn ich mit der rechten Maustaste auf den oberen Bereich des Modals klicke und "Symbolleiste anpassen" auswähle, wird die korrekte Höhe wiederhergestellt. Wenn Sie für die Anpassungsoptionen auf "Fertig" klicken, kann das Fenster wieder an Höhe zunehmen und diesmal mehr Höhe anzeigen, als gewünscht ist.

  • Wenn die allgemeine Safari-Einstellung für Ansicht> Statusleiste anzeigen aktiviert ist, wird der Dialog in der gewünschten Höhe gerendert. Wenn die Statusleiste deaktiviert ist, wird der Dialog in einer falschen Höhe gerendert.

Weitere Informationen

  • Screenshots mit Beschreibungen: http://imgur.com/KqrHZs4

  • Safari 8 und 6.2 werden manchmal falsche Werte melden (siehe Screenshots) das erste Mal der Dialog geöffnet wird. Wenn Sie mit der rechten Maustaste auf die Seite klicken und "Neu laden" auswählen, wird die Seite mit den korrekten Werten aktualisiert.

  • Ich glaube nicht, dass es möglich ist, die URL-Leiste auszublenden, die ich vermute, dass sie ein Teil des Problems in Bezug auf die Fensterhöhe Immobilien ist.

CODE - Testseite, die einen modalen Dialog startet.

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
<title>Testing Modal Dialog Heights</title> 
 

 

 
<script type="text/javascript"> 
 
function openModal() 
 
{ 
 
\t var url = "modal.html"; 
 
\t var args = null; 
 
\t var features = "resizable:no;scroll:no;status:no;center:yes;help:no;dialogwidth:400px;dialogheight:400px"; 
 
\t 
 
\t window.showModalDialog(url, args, features); 
 
\t 
 
} 
 
</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 
 
{ 
 
\t width:100%; 
 
\t height:100%; 
 
} 
 

 
#Results 
 
{ 
 
\t position:absolute; 
 
\t top:0; 
 
\t right:0; 
 
\t bottom:0; 
 
\t left:0; 
 
} 
 

 
</style> 
 

 
<script type="text/javascript"> 
 

 
window.onload = doOnLoad; 
 

 
function doOnLoad() 
 
{ 
 
\t 
 
\t window.menubar.visible = false; 
 
\t window.locationbar.visible = false; 
 
\t window.toolbar.visible = false; 
 
\t window.statusbar.visible = false; 
 
\t window.personalbar.visible = false; 
 
\t 
 
\t /* Test one */ 
 
\t var pResults = document.getElementById("Results"); 
 
\t pResults.innerHTML += "clientHeight: " + pResults.clientHeight + "<br />"; 
 
\t pResults.innerHTML += "clientWidth: " + pResults.clientWidth + "<br /><br />"; 
 
\t pResults.innerHTML += "offsetHeight: " + pResults.offsetHeight + "<br />"; 
 
\t pResults.innerHTML += "offsetWidth: " + pResults.offsetWidth + "<br /><br />"; 
 
\t 
 
\t 
 
\t /* Test two */ 
 
\t var pResults = document.getElementById("Results"); 
 
\t pResults.innerHTML += "window.innerHeight: " + window.innerHeight + "<br />"; 
 
\t pResults.innerHTML += "window.innerWidth: " + window.innerWidth + "<br /><br />"; 
 
\t pResults.innerHTML += "window.outerHeight: " + window.outerHeight + "<br />"; 
 
\t pResults.innerHTML += "window.outerWidth: " + window.outerWidth + "<br /><br />"; 
 
\t 
 
\t pResults.innerHTML += "window.devicePixelRatio: " + window.devicePixelRatio + "<br />"; 
 
\t pResults.innerHTML += "window.locationbar.visible: " + window.locationbar.visible + "<br />"; 
 
\t pResults.innerHTML += "window.menubar.visible: " + window.menubar.visible + "<br />"; 
 
\t pResults.innerHTML += "window.toolbar.visible: " + window.toolbar.visible + "<br />"; 
 
\t pResults.innerHTML += "window.statusbar.visible: " + window.statusbar.visible + "<br />"; 
 
\t 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>

Antwort

0

window.showModalDialog vs. window.open

Nähte Intenet Explorer der einzige sein, die showModalDialog implementiert. Anstatt also würde ich verwenden window.open

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

dann einige PHP verwenden, um die nächste Seite

<?php 
 

 
$param1 = $_GET['param1']; 
 
$param2 = $_GET['param2']; 
 

 
?> 
 

 
<p>Some type of something: <?= $param1 ?></p> 
 
<p>Some type of something: <?= $param2 ?></p>

zu verarbeiten