window.open打开页面居中显示的示例代码

下面是关于如何使用JavaScript代码在浏览器中打开一个新页面并使其居中显示的攻略。

1. 创建一个新页面

首先，我们需要使用 window.open() 方法创建一个新的浏览器窗口，并且通过 document.write() 方法向其写入一些内容，例如：

<script type="text/javascript">
    var newWindow = window.open();
    newWindow.document.write("<h1>Hello World!</h1>");
</script>

在上述代码中，我们使用 window.open() 方法创建了一个新的浏览器窗口，并把其存储到 newWindow 变量中。然后我们使用 document.write() 方法向新浏览器窗口中写入了一个 <h1> 标签和文本内容 "Hello World!"。

2. 让新页面居中显示

要让新页面居中显示，我们需要做以下几个步骤：

2.1 获取屏幕和窗口大小

首先，我们需要获取屏幕和窗口的大小。可以使用 screen.availWidth 和 screen.availHeight 属性获取屏幕的可用宽度和高度，以及使用 newWindow.innerWidth 和 newWindow.innerHeight 属性获取新窗口的宽度和高度，例如：

var screenWidth = screen.availWidth;
var screenHeight = screen.availHeight;
var windowWidth = newWindow.innerWidth || document.body.clientWidth;
var windowHeight = newWindow.innerHeight || document.body.clientHeight;

在上述代码中，我们使用了一个特殊的技巧：newWindow.innerWidth 和 newWindow.innerHeight 属性用来获取新页面窗口的宽度和高度，如果当前浏览器不支持这些属性，我们就使用 document.body.clientWidth 和 document.body.clientHeight 属性代替。

2.2 计算居中位置

接下来，我们根据计算公式计算新窗口的位置使其居中。计算公式为：

left = (screenWidth - windowWidth) / 2
top = (screenHeight - windowHeight) / 2

也就是说，新窗口的左侧位置是 (屏幕宽度 - 窗口宽度) / 2，顶部位置是 (屏幕高度 - 窗口高度) / 2。

我们可以像这样编写代码：

var left = (screenWidth - windowWidth) / 2;
var top = (screenHeight - windowHeight) / 2;

2.3 设置新窗口位置

最后，我们使用 moveTo() 方法将新窗口移动到居中位置：

newWindow.moveTo(left, top);

至此，我们已经完成了让一个新窗口居中显示的功能。下面是一个完整的示例代码：

<script type="text/javascript">
    var newWindow = window.open();
    newWindow.document.write("<h1>Hello World!</h1>");

    var screenWidth = screen.availWidth;
    var screenHeight = screen.availHeight;
    var windowWidth = newWindow.innerWidth || document.body.clientWidth;
    var windowHeight = newWindow.innerHeight || document.body.clientHeight;

    var left = (screenWidth - windowWidth) / 2;
    var top = (screenHeight - windowHeight) / 2;

    newWindow.moveTo(left, top);
</script>

示例说明

下面是两个使用 window.open() 方法打开页面并居中显示的示例：

示例一

<script type="text/javascript">
    var url = "http://www.example.com";
    var name = "example";
    var specs = "width=600,height=400";
    var newWindow = window.open(url, name, specs);

    var screenWidth = screen.availWidth;
    var screenHeight = screen.availHeight;
    var windowWidth = newWindow.innerWidth || document.body.clientWidth;
    var windowHeight = newWindow.innerHeight || document.body.clientHeight;

    var left = (screenWidth - windowWidth) / 2;
    var top = (screenHeight - windowHeight) / 2;

    newWindow.moveTo(left, top);
</script>

在上面的示例代码中，我们使用了 window.open() 方法，打开了一个 http://www.example.com 网页，并指定了窗口的名称为 example，大小为 width=600,height=400。然后，我们计算了新窗口的居中位置，并使用 moveTo() 方法将其移动到居中位置。

示例二

<script type="text/javascript">
    var newWindow = window.open();
    var content = "<h1>This is a new page</h1><p>Hello World!</p>";
    newWindow.document.write(content);

    var screenWidth = screen.availWidth;
    var screenHeight = screen.availHeight;
    var windowWidth = newWindow.innerWidth || document.body.clientWidth;
    var windowHeight = newWindow.innerHeight || document.body.clientHeight;

    var left = (screenWidth - windowWidth) / 2;
    var top = (screenHeight - windowHeight) / 2;

    newWindow.moveTo(left, top);
</script>

在上面的示例代码中，我们使用 window.open() 方法，打开了一个空的新窗口，并向其中写入了一些 HTML 内容。然后，我们计算了新窗口的居中位置，并使用 moveTo() 方法将其移动到居中位置。