Occasionally, there come a time when old tricks become handy on solving new problems. Recently, an application that I support had some serious network latency when attempting to open a popup consisting exclusively of static content. While this small page came from a webserver with appropriate caching headers being sent, it still took upwards of 2 seconds for the page to be displayed by the client browser because of network latency issues.
True, this was for MSIE, and there are some notorious performance issues with the javascript used for popups, but those are different topics to be discussed later.
Old implementation, loads content of ’somefile.html’ as a url popup:
<script type=”text/javascript”><!–
function testwindow(){
var linkWin = window.open(’/somefile.html’,”,’width=300,height=200,scrollbars=no,toolbar=no’);
}
// –></script>
<a href=”javascript:testwindow();”>TEST</a>
New implementation, creates content of ’somefile.html’ in javascript instead:
<html>
<head>
<title>Popup Demo</title>
<script type=”text/javascript”>
function testwindow(x) {
var content;
var linkWin = window.open(”,”,’width=300,height=200,scrollbars=no,toolbar=no’);
if (!linkWin.opener) { linkWin.opener = self; }
content = “<!DOCTYPE html><html><head>”;
content += “<title>Example</title>”;
content += ‘</head><body bgcolor=”#ccc”>’;
content += “<p>Any HTML will work, just make sure to escape \”quotes\”,”;
content += ‘or use single-quotes instead.</p>’;
content += “<p>You can even pass parameters… (” + x + “)</p>”;
content += “</body></html>”;
linkWin.document.open();
linkWin.document.write(content);
linkWin.document.close();
//return false;
}
</script>
</head>
<body>
<a href=”javascript:testwindow(’this is x’);”>TEST</a>
</body>
</html>
NOTE: there is one small performance tradeoff here, in the ‘new’ case you will always be downloading the content of the popup, even if you never use it. This can be remediated by adding it to an external static .JS file.
Cheers!
![]()