如何使用JavaScript修改弹出预览窗口的样式（含宽度、高度与位置设置）

嘿，我来帮你搞定这个弹出窗口的问题！你的代码里有两个关键问题需要调整，一个是背景色的设置方式，另一个就是你想要的窗口尺寸和位置控制，咱们一步步来：

1. 正确控制弹出窗口的尺寸与位置 #

你提到不知道怎么设置窗口的宽高和位置，其实这些参数都是在open()方法的第三个参数里定义的！这个参数叫做窗口特性字符串，你可以在里面添加width、height、left、top这些属性，比如：

// 示例：设置宽600px、高400px，距离屏幕左/顶部各100px
const preWindow = open("", "preWindow", "status=no,toolbar=no,menubar=yes,width=600,height=400,left=100,top=100");

常用的窗口特性参数还有：

• width: 窗口宽度（像素）
• height: 窗口高度（像素）
• left: 窗口左上角距离屏幕左侧的距离（像素）
• top: 窗口左上角距离屏幕顶部的距离（像素）
• 你原来的status=no、menubar=yes这些可以保留，按需调整

2. 修复背景色不生效的问题 #

你之前用preWindow.document.style = 'background-color: #222'是错误的写法，因为document对象本身没有style属性，应该修改document.body的样式：

preWindow.document.body.style.backgroundColor = '#222';
// 如果需要让文本更清晰，还可以设置文字颜色
preWindow.document.body.style.color = '#fff';

如果需要更复杂的页面样式（比如内边距、字体），推荐在写入内容时直接添加<style>标签，这样更灵活：

preWindow.document.write(`
  <style>
    body {
      background-color: #222;
      color: #fff;
      padding: 20px;
      font-family: Arial, sans-serif;
      margin: 0;
    }
  </style>
  ${temp}
`);

完整修改后的代码 #

把这些调整整合起来，你的代码会变成这样：

function preview() { 
  const temp = document.editorial.textarea3.value; 
  // 定义窗口尺寸、位置和其他特性
  const preWindow = open("", "preWindow", "status=no,toolbar=no,menubar=yes,width=600,height=400,left=100,top=100"); 
  
  // 设置页面基础样式
  preWindow.document.body.style.backgroundColor = '#222';
  preWindow.document.body.style.color = '#fff';
  
  preWindow.document.open(); 
  preWindow.document.write(temp); 
  preWindow.document.close(); 
}

小提醒 #

现代浏览器对弹出窗口有拦截机制，确保preview()函数是通过用户的主动交互触发的（比如点击按钮），否则可能会被浏览器拦截哦！

内容的提问来源于stack exchange，提问作者ixcode