Goal
In my last post I showed how can we get started with Web development by making a simple "Hello World" HTML web page. In this post we will see how can we open a new window to show some content.Getting Started
Lets first create a web page that meets our requirement and then we can look at the javascript part.Again create a file called index.html and add following content in it.
<html> <header><title>Open Source For Geeks Tutorial</title></header> <body> <center> <h1>Open Source For Geeks Demo</h1> <table> <caption>Demo Table</caption> <tr> <td> Enter Some Text : </td> <td> <input type="text" name="textContent"> </td> </tr> <tr> <td> Click to Submit : </td> <td> <input type="button" value="Submit"> </td> </tr> </table> </center> </body> </html>
Now view the page in the browser. You should see something like below
What we want to achieve is to enter some text in the text field then click the Submit button and we should be able to see the text content entered on a new page.
Following code is fully functional with javascript function.
<html>
<header>
<title>Open Source For Geeks Tutorial</title>
<script>
function openNewPage() {
top.consoleRef=window.open('','myconsole',
',menubar=0'
+',toolbar=1'
+',status=0'
+',scrollbars=1'
+',resizable=1');
top.consoleRef.document.writeln(
'<html><head><title>Open Source For Geeks Tutorial</title></head>'
+'<body bgcolor=white onLoad="self.focus()">'
+ '<h1><b><i>This is a new Window!</i></b></h1>'
+ '<textarea rows="40" cols="100">'
+ document.getElementById("SubmitTextID").value
+ '</textarea>'
+'</body></html>'
);
top.consoleRef.document.close();
}
</script>
</header>
<body>
<center>
<h1>Open Source For Geeks Demo</h1>
<table>
<caption>Demo Table</caption>
<tr>
<td>
Enter Some Text :
</td>
<td>
<input type="text" id="SubmitTextID" name="textContent">
</td>
</tr>
<tr>
<td>
Click to Submit :
</td>
<td>
<input type="button" value="Submit" onclick="openNewPage()">
</td>
</tr>
</table>
</center>
</body>
</html>
and lets try it out
Enter some text in the text field and click Submit button. The entered text should now come in the new window.
Now click the submit button. New Window will open as shown below
That was it! It's that simple.Just a java script function. There is a reason I have put the content inside <textarea> tag. This is because you can even have tags inside text area and they will be displayed as tag. That means if your text has <b> in it same will be displayed and will not be interpreted as bold tag. This was just a simple example but you can show complex data that is fetched from the server. You can also show some xml content in it.
Carefull!!!!
Be careful though. document.writeln() method takes a html input. So all your escaped characters will be "un-escaped". Meaning if your display text contains something like & it will be replaced by & and shown. If you really want to show the escaped characters you need to do something like below -
function writeConsole(content,idx) {
top.consoleRef=window.open('','myconsole' + idx,
',menubar=0'
+',toolbar=1'
+',status=0'
+',scrollbars=1'
+',resizable=1');
top.consoleRef.document.writeln(
'<html><head><title> Generated Content</title></head>'
+'<body bgcolor=white onLoad="self.focus()">'
+ '<textarea rows="500" cols="500">'
+ '</textarea>'
+'</body></html>'
);
top.consoleRef.document.close();
var doc = top.consoleRef.document;
var textarea = doc.getElementsByTagName('textarea')[0];
textarea.value = content;
}
I encountered this scenario and corresponding stack overflow question asked is
