弹出新窗口并写入新内容

在 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

原文地址:https://www.cnblogs.com/zoho/p/2543526.html