<img src="images/show_icon.png" alt="介绍" border="0" style="cursor:pointer;" onClick="javascript:window.open('intro/intro10.html','new','height=660,width=690,top=100,left=400');"/>我来详细讲解这段代码，重点分析 window.open() 括号内的参数。
代码整体分析
<img src="images/show_icon.png" alt="介绍" border="0"
style="cursor:pointer;"
onClick="javascript:window.open('intro/intro10.html','new','height=660,width=690,top=100,left=400');"/>这是一个图片元素，点击时会弹出一个新窗口显示指定页面。
window.open() 参数详解
完整语法
window.open(url, target, windowFeatures, replace);
在代码中只使用了前三个参数：
window.open('intro/intro10.html', 'new', 'height=660,width=690,top=100,left=400')参数1：URL - 'intro/intro10.html'
// 要打开的页面地址'intro/intro10.html'
这是相对路径
相对于当前页面的位置
实际地址为：
当前域名/intro/intro10.html
参数2：窗口名称 - 'new'
// 窗口标识名称'new'
这个名称的用途：
窗口标识：如果已经有一个同名窗口，会重新使用它（而不是新建）
超链接目标：可以在其他地方使用
<a target="new">窗口控制：后续可以通过这个名称操作窗口
特殊名称值：
_blank：总是在新窗口/标签页打开（推荐使用）_self：在当前窗口打开_parent：在父框架打开_top：在整个窗口打开
注意：代码中使用 'new' 不是标准名称，但会创建一个名为 "new" 的窗口。
参数3：窗口特性 - 'height=660,width=690,top=100,left=400'
这是最复杂的部分，控制弹出窗口的外观和位置。
3.1 窗口尺寸
height=660, // 窗口高度：660像素 width=690 // 窗口宽度：690像素
3.2 窗口位置
top=100, // 距离屏幕上边缘：100像素 left=400 // 距离屏幕左边缘：400像素
完整的特性字符串格式
'feature1=value1,feature2=value2,...'
常用窗口特性参数
尺寸和位置
| 特性 | 值 | 说明 |
|---|---|---|
height | 像素值 | 窗口高度 |
width | 像素值 | 窗口宽度 |
top | 像素值 | 距离屏幕上边缘 |
left | 像素值 | 距离屏幕左边缘 |
screenX | 像素值 | 同 left（某些浏览器） |
screenY | 像素值 | 同 top（某些浏览器） |
窗口外观控制
| 特性 | 值 | 说明 |
|---|---|---|
menubar | yes/no/1/0 | 是否显示菜单栏 |
toolbar | yes/no/1/0 | 是否显示工具栏 |
location | yes/no/1/0 | 是否显示地址栏 |
status | yes/no/1/0 | 是否显示状态栏 |
resizable | yes/no/1/0 | 是否可调整大小 |
scrollbars | yes/no/1/0 | 是否显示滚动条 |
其他特性
| 特性 | 值 | 说明 |
|---|---|---|
fullscreen | yes/no/1/0 | 是否全屏显示（已废弃） |
dialog | yes/no/1/0 | 是否显示为对话框样式 |
代码示例扩展
示例1：常见弹窗配置
// 固定大小的居中窗口
function openCenteredWindow(url, width, height) {
var left = (screen.width - width) / 2;
var top = (screen.height - height) / 2;
window.open(
url,
'_blank',
`width=${width},height=${height},top=${top},left=${left},resizable=no,scrollbars=yes`
);
}
// 使用
openCenteredWindow('intro/intro10.html', 690, 660);示例2：不同配置的弹窗
// 1. 最简单的弹窗
window.open('page.html', '_blank');
// 2. 带基本信息的弹窗
window.open('page.html', '_blank', 'width=800,height=600');
// 3. 对话框样式的弹窗
window.open('page.html', '_blank',
'width=400,height=300,menubar=no,toolbar=no,location=no,status=no,resizable=no');
// 4. 精确定位的弹窗
window.open('page.html', '_blank',
'width=500,height=400,left=200,top=150,scrollbars=yes,resizable=yes');关于原代码的几个注意点
1. javascript: 前缀的问题
onClick="javascript:window.open(...)"
javascript:在此处不是必需的是早期浏览器的遗留写法
现代写法直接写 JavaScript 代码即可：
onClick="window.open(...)"
2. 窗口名称 'new' 的问题
'new' // 可能导致意外的窗口复用
更好的做法是：
'_blank' // 总是打开新窗口 // 或者 '_blank', 'newwin' // 指定窗口名称但总是新建
3. 缺少单位问题
height=660,width=690 // 实际单位是像素，但应该明确说明
现代替代方案
使用更现代的弹窗方法
// 使用模态框（Modal）代替弹窗
$('#myModal').modal('show');
// 或者使用更灵活的弹出层库
layer.open({
type: 2,
title: '介绍',
area: ['690px', '660px'],
fixed: true,
maxmin: false,
content: 'intro/intro10.html'
});弹窗的现代最佳实践
function openPopup(url, options = {}) {
const defaultOptions = {
width: 800,
height: 600,
left: (screen.width - (options.width || 800)) / 2,
top: (screen.height - (options.height || 600)) / 2,
menubar: 'no',
toolbar: 'no',
location: 'no',
status: 'no',
resizable: 'yes',
scrollbars: 'yes'
};
const settings = { ...defaultOptions, ...options };
const features = Object.entries(settings)
.map(([key, value]) => `${key}=${value}`)
.join(',');
return window.open(url, '_blank', features);
}
// 使用
openPopup('intro/intro10.html', {
width: 690,
height: 660,
left: 400,
top: 100
});安全考虑和用户体验
1. 浏览器拦截
现代浏览器可能会拦截 window.open()，如果：
不是在用户直接操作（如点击）中触发
页面加载时自动弹出
在异步回调中调用
2. 移动端兼容性
移动设备上弹窗可能表现不同：
可能在新标签页打开
尺寸特性可能被忽略
3. 无障碍访问
<img src="images/show_icon.png" alt="查看介绍" role="button" tabindex="0" onClick="openIntro()" onKeyPress="if(event.key === 'Enter') openIntro()">
总结
URL参数：
'intro/intro10.html'- 要打开的页面窗口名称：
'new'- 窗口标识（建议用_blank）特性字符串：控制窗口大小、位置和外观
height=660：高660像素width=690：宽690像素top=100：距屏幕上边100像素left=400：距屏幕左边400像素
这段代码创建了一个固定大小（690×660）、固定位置（距离左边400px，上边100px）的弹窗窗口。虽然功能实现简单直接，但需要注意浏览器兼容性、用户交互体验和现代Web开发的最佳实践。