zoukankan      html  css  js  c++  java
  • 弹出新窗口并写入新内容

    在 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

  • 相关阅读:
    PAT顶级 1024 Currency Exchange Centers (35分)(最小生成树)
    Codeforces 1282B2 K for the Price of One (Hard Version)
    1023 Have Fun with Numbers (20)
    1005 Spell It Right (20)
    1092 To Buy or Not to Buy (20)
    1118 Birds in Forest (25)
    1130 Infix Expression (25)
    1085 Perfect Sequence (25)
    1109 Group Photo (25)
    1073 Scientific Notation (20)
  • 原文地址:https://www.cnblogs.com/zoho/p/2543526.html
Copyright © 2011-2022 走看看