|
A Web page is usually refreshed when processing a form within a Web page and sending information to a database
or commencing an action that will require refreshing a Web browser window with new output. At times it will be
necessary to avoid refreshing the contents of a Web browser window because it currently contains a Web page with
too much data input. This poses an inconvenience for handling the avoidance of a loss of data or interruption of
the end-user Web page interaction.
This disturbance can be avoided by streaming the form data to the server and the Web page output of the processed source file
back to a new Web browser window using the target directive (specified within the
<form> or <a href> element tags or by assigning the form.target property within an event such as onClick).
Internet Explorer 7 and other browsers do not allow a script to close a window as part of the security
infrastructure in order to prevent phishing and other malicious or intruding activity. There is a way around this
however, and that is to launch a new window by name from the calling script. This is accomplished with
javascript, and in the case of this article PHP will be the language of choice for handling dynamic content
such as when transferring data from a form or URL parameters into a database or text file or performing some
other process that would normally require refreshing the contents of the Web browser's window. Opening a
new window using javascript will enable a forced close of the window after server-side processing of the source file
has completed, and the Web page has been sent to the client browser window. This is a simple hack method of achieving
a seamless Web page viewing experience while processing a server request -- in other words without disturbing the
original Web page that calls upon an external process.
* Remarks: The form, once clicked (onClick event), will open a new browser window with the matching form target name.
At that point the form submission is forced and the new window is loaded with the file specified by the Web page of the calling browser window, and indicated by the form action directive. But before
the final output from the action file is sent back to the client as a Web page; the form data is sent to the server for access
by the server software (Web Server, PHP/ASP server etc.) in conjunction with parsing and processing the server-side script file
(dynamic Web page such as PHP or ASP). Upon loading of the Web page output in the client's newly opened Web browser window the HTML
contained therein will be displayed, and once the javascript statement to close the window is reached -- the window will close
without user intervention for confirmation. This is almost unnoticeable to the end-user and far from an annoyance. Note that the
URL parameters as well as the form parameters from the parent browser window have been sent and accessed by the new child window
without disturbing the Web page of the parent calling Web browser window. This achievement is the essential point of the article.
|
<html>
<head>
<script type="text/javascript">
function opnWindow (sURL)
{
var sAttribs = "toolbar=no,location=no,directories=no,status=no," +
"menubar=no,scrollbars=yes,resizable=no,width=150,height=150,left=0,top=0";
var w = window.open (sURL, "wnd", sAttribs);
if (w)
return false;
return true;
}
</script>
</head>
<body>
<form id ='opn' name = 'opn' method = "post" action = "new_win.php?getvars=GOTDATA"
target = "wnd">
<input id = "opn" name = "opn" type = "submit" value = "Open Window"
onClick = "javascript:opnWindow(''); document.opn.submit();">
<input id = "postvars" name = "postvars" type = "text" value = "POSTEDDATA">
</form>
</body>
</html>
Code View - dynamicreport.com
|
This is the Web page to be opened in a new Web browser window that will process the form data and close upon completion.
|
<html>
<body>
<?
// the window closes immediately after the output, but reveals
// that data was sent over and can be processed in a new window
// (window to window communication via forms and URL params.)
echo "<p>FORM POST DATA: $_POST[postvars]<br>".
"FORM GET DATA: $_GET[getvars]</p>";
// process the form information: write to database, etc. here
?>
<a href = "javascript:window.close();">Close Window</a>
<?
// window is closed after the page is output
echo '<script type="text/javascript">window.close();</script>';
?>
</body>
</html>
Code View - dynamicreport.com
|
Click here for demo: auto window close.
Click here for demo: click window close.
|
dynamicreport.com
