在 JavaScript 中可以用 window.open() 方法来弹出新窗口。例如:
var win = window.open("newwin.html", "somename", "fullscreen");
其中第一个参数指明在新窗口中载入的网页的 URL 地址;而第二个参数指明新窗口的名字,如果和已经打开的某窗口同名,将在该窗口打开而不另开新窗口;而第三个参数指明新窗口的各种外观属性,包括地址栏,状态栏,滚动条,大小位置,是否全屏等等,由于安全上的考虑,不少浏览器增加了对这些属性的限制,这些属性未必都有效。
我们也可以将第一个参数设置为空字符串,然后用 document.write() 方法来写入新窗口的网页内容。例如:
var win = window.open("", "somename", "fullscreen"); var doc = win.document; doc.write('<!DOCTYPE html><html><head>'); doc.write('<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />'); doc.write('<link rel="stylesheet" type="text/css" href="style.css" />'); doc.write('<script type="text/javascript" src="one.js"><\/script>'); doc.write('<script type="text/javascript" src="two.js"></scr' + 'ipt>'); doc.write('</head><body>'); doc.write('<div id="somediv">' + 'Hello New Window!' + '</div>'); doc.write('</body></html>'); doc.close();
因为我们是在新窗口打开时写入网页内容,所以不需要用 document.open()。在写入 script 元素时对字符串 </script> 需要作特别处理,否则浏览器会认为脚本到此已经结束了,从而产生错误。上面的例子中对 one.js 和 two.js 分别使用转义和拆分这两种方法来处理这个问题,推荐用第一种方法。
另外,上面的代码在 IE9 之前以及 Opera 中可能会有问题:因为 url 是空的,所以用相对路径的 css 和 js 文件可能读取不到。即使改用了绝对路径,在 Opera 11.62 中还会有更奇怪的现象:如果设置为拦截新窗口再点击允许打开弹出窗口,上面代码可以正常运行;而设置为不拦截弹出窗口,上面代码运行时弹出窗口的内容在第一个 js 文件后就被截断了(在右键菜单中选择“检查元素”就可以看到窗口的源码)。这个怪异现象也许是 Opera 的问题。
2012-07-01 更新:上述问题应该是多次 doc.write 导致的浏览器处理差异,改为下面的一次全部 doc.write 就正常了:
var win = window.open("", "somename", "fullscreen"); var doc = win.document; var content = [ '<!DOCTYPE html><html><head>', '<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />', '<link rel="stylesheet" type="text/css" href="style.css" />', '<script type="text/javascript" src="one.js"><\/script>', '<script type="text/javascript" src="two.js"></scr' + 'ipt>', '</head><body>', '<div id="somediv">' + 'Hello New Window!' + '</div>', '</body></html>'].join(''); doc.write(content); doc.close();
参考资料:
[1] window.open - MDN
[2] JavaScript - Popups
[3] JavaScript makes new page that contains more JavaScript?
[4] Writing HTML in a SCRIPT Element