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

  • 相关阅读:
    Runloop 新的看法
    如何利用openCV做灰度图片
    WebViewJavascriptBridge使用说明(iOS)
    页面滑动返回和点击返回按钮动作实现;
    获取设备UDID、IMEI、ICCID、序列号、Mac地址等信息
    设计模式----单例模式
    多线程理论知识 -- 小白的教程
    SQLite 的创建与编辑
    strong,weak, retain, assign的区别
    CGContextRef 画线简单用法
  • 原文地址:https://www.cnblogs.com/zoho/p/2543526.html
Copyright © 2011-2022 走看看