如何在新窗口中编写 JavaScript（window.open()）？

Question

如何在新窗口中编写 JavaScript（window.open()）？

3

对于一个JavaScript作业，我需要使用window.open()创建一个新的窗口。使用document.write()来填充内容。这个窗口必须有按钮，使用JavaScript来改变窗口中文本的大小。

我的问题是，如何在这个新窗口中使用或编写JavaScript，以便我可以调整窗口中的文本大小？

以下是我代码的简化版本（存储在外部js文件中）：

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;
    }
}

如何在document.write()中访问我的JavaScript函数？我也尝试在document.write()语句中编写函数，但那也不起作用。

谢谢，马克。

- Mark

你没有关闭你的 switch 语句，你忘记了一个 }。 - Downgoat

1

似乎您正在尝试在父窗口调用函数，但这不会起作用。请将您的按钮onclick更改为“opener.resizeText(1)”。参见：MDN：window opener - Yogi

@vihan1086 谢谢你指出这个问题，我已经进行了编辑。不幸的是，那并不是问题所在。 - Mark

@Robert，我刚试了一下 - 我现在可以访问该函数，但文本仍未调整大小。我已在switch语句中放置了警报框，并且它们正在显示，因此函数访问似乎是正常的。下一步是找到正确的DOM以获取属性。感谢您的帮助！ - Mark

我会尝试为您提供一个例子。 - Yogi

2个回答

0

马克 -

以下示例可以正常工作，前提是弹出窗口未被阻止。这只是许多方法之一。请注意，它使用“opener”在父窗口中调用函数，然后更改正文的字体大小。您的代码试图设置文档的字体大小，这不是您想要的，即它不会做任何事情。还要注意，fontSize区分大小写，如果使用“fontsize”，则什么也不会发生。最后，请勿在设置正文字体大小时使用百分比，因为它将无法按预期工作。而是使用px（像素）。总之，这应该足以让您开始工作，我将把细节留给您。

<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>

- Yogi

1

非常感谢您抽出时间来做这件事。现在我已经让它工作了。我还注意到我没有将“body”添加到DOM中，并且没有将“fontSize”的“S”大写。 - Mark

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Mark Bellamy · Accepted Answer

这段代码的工作基于你已经拥有的内容：

<!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>