zoukankan      html  css  js  c++  java
  • 模式窗口showModalDialog的用法总结【转自http://hi.baidu.com/freezesoul/blog】

    1。打开窗口:
    var handle = window.showModalDialog(url, objects, feathers);
    其中:objects可以为参数(包括数组),也可以是对象。
    通常的用法 objects = {window} ,把父窗体的对象共享给子窗体。

    2。关闭子窗口:
    window.close();

    3。从子窗体传参数给父窗体:
    window.returnVal = string;

    3。清除缓存,防止模式窗口页面不更新的情况:
    HTML
    <META HTTP-EQUIV="pragma" CONTENT="no-cache">
    <META HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate">
    <META HTTP-EQUIV="expires" CONTENT="Mon, 23 Jan 1978 20:52:30 GMT">
    ASP
    <%
    Response.Expires = -1
    Response.ExpiresAbsolute = Now() - 1
    Response.cachecontrol = "no-cache"
    %>
    PHP
    header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");
    header("Cache-Control: no-cache, must-revalidate");
    header("Pragma: no-cache");
    JSP
    response.setHeader("Pragma","No-Cache");
    response.setHeader("Cache-Control","No-Cache");
    response.setDateHeader("Expires", 0);

    4。防止打开新窗口(如提交表单):
    <base target="_self">

    5。在模式窗口使用F5刷新页面:
    <base target="_self">
    <body onkeydown="if (event.keyCode==116){reload.click()}">
    <a id="reload" href="filename.htm" style="display:none">reload...</a>
    其中:filename为窗口页面。

    6。防止模式窗口打开的页面出现cookie丢失的情况:
    模式窗口打开新窗口时,仅可以使用 showModalDialog(url,window,feathers); 方法,且 objects 为 window 。

    7。在弹出窗口中获得或设置主窗口的任何值:
    打开弹出窗口时用:showModalDialog(url, window, feathers)
    在弹出窗口中使用 window.dialogArguments 对象(即主窗口传递过来的 window 对象集),即可以获得或者设置主窗口的值。

    8 子页面关闭同时刷新父页面

    调用方法

            父页面:openModelWin('ChooseStyle.aspx');

            子页面:closeWin()

    脚本:

    function openModelWin(url)
    {
        var obj = showModalDialog(url,'title',"dialogWidth:600px;");
       
        if(obj =='reload')
        {
            window.location.reload();
        }
    }
    function closeWin()
    {
        window.opener = null;
       
        window.close();
        window.returnValue='reload';
    }

  • 相关阅读:
    chrome 开发者工具——前端实用功能总结
    而立之年——回顾我的前端转行之路
    编译原理实战入门:用 JavaScript 写一个简单的四则运算编译器(修订版)
    手把手带你入门前端工程化——超详细教程
    手把手教你搭建 Vue 服务端渲染项目
    前端项目自动化部署——超详细教程(Jenkins、Github Actions)
    前端国际化辅助工具——自动替换中文并翻译
    深入了解 webpack 模块加载原理
    实现一个 webpack loader 和 webpack plugin
    博客本地编辑器-OpenLiveWriter安装使用
  • 原文地址:https://www.cnblogs.com/Godblessyou/p/1779393.html
Copyright © 2011-2022 走看看