CODEWITHSUNDEEP
javascript
Mark
Mark

Reputation: 55

How to write JavaScript in a new window (window.open())?

For a JavaScript assignment, I am to create an new window using window.open(). This window is to be filled with content using document.write(). The window must have buttons which use JavaScript to alter the size of the text in the window.

My question is, how can I use or write JavaScript into this new window, so that I can resize the window's text?

Here is a shortened version of my code (stored in external js file):

var newWindow;

function displayWindow() {
  newWindow = window.open("", "newWindow", "width=800, height=600");
  newWindow.document.write('<button onclick="resizeText(1)">-</button> Text size <button onclick="resizeText(2)">+</button>');
  newWindow.document.write('Here is some text that I would like to be able to be resized.');
}

function resizeText(change) {
  switch (change) {
      case 1:
        newWindow.document.style.fontsize = "80%";
        break;
      case 2:
        newWindow.document.style.fontsize = "120%";
        break;
      default:
        alert('Error');
        break;
    }
}

How can I access my JavaScript functions within document.write()? I have also tried writing functions within the document.write() statements, but that does not work either.

Thank you, Mark.

Upvotes: 4

Views: 6912

Answers (2)

Mark Bellamy
Mark Bellamy

Reputation: 135

This code works based on what you have already:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<script language="JavaScript" type="text/javascript">
var newWindow;

function displayWindow() {
  newWindow = window.open("", "newWindow", "width=800, height=600");

var windowInsertVar = '';
    windowInsertVar += '\x3Cscript>';
    windowInsertVar += 'function resizeText(change) {';
    windowInsertVar += 'switch (change) {';
    windowInsertVar += 'case 1:';
    windowInsertVar += 'document.getElementById(\'textToBeResized\').style.fontSize = "80%"\;';
    windowInsertVar += 'break\;';
    windowInsertVar += 'case 2:';
    windowInsertVar += 'document.getElementById(\'textToBeResized\').style.fontSize = "120%"\;';
    windowInsertVar += 'break\;';
    windowInsertVar += 'default:';
    windowInsertVar += 'alert(\'Error\')\;';
    windowInsertVar += 'break\;';
    windowInsertVar += '}';
    windowInsertVar += '}';
    windowInsertVar += '\x3C/script>';
    windowInsertVar += '<button onclick="resizeText(1)">-</button> Text size <button onclick="resizeText(2)">+</button>)\;';
    windowInsertVar += '<div id="textToBeResized">Here is some text that I would like to be able to be resized.</div>';

    newWindow.document.write(windowInsertVar);
}
</script>

</head>

<body>
<button id="displayWindow" onClick="displayWindow();">Display Window</button>
</body>
</html>

Upvotes: 1

Yogi
Yogi

Reputation: 7334

Mark -

The example below works, provided popups are not blocked. This is just one of many ways you could do this. Note that it calls the function in the parent window using "opener" and then changes the font size of the body. Your code is trying to set the font size of document, which is not what you want, i.e., it won't do anything. Also note that fontSize is case sensitive and that if you use "fontsize" nothing will happen. Lastly, don't use percents when setting body font size as it will not work as you might expect. Instead use px (pixels). Anyway, this should be enough to get you going and I'll leave the details to you.

<html>
<body onload="init()">
<h2>Parent Window</h2>
 <script type="text/javascript">

     var popup;

     function init() {
        popup =  window.open("", "newWindow", "width=800, height=600");
        if (popup) popup.document.write('<html><body>Child Window<br><button onclick="opener.fontSize(48)">Test</button></body></html>'); 
     }

     function fontSize(size) {
         popup.document.body.style.fontSize = size + 'px';
     }

</script>
</body>
</html>

Upvotes: 0

Related Questions