zoukankan      html  css  js  c++  java
  • 打开新窗口,window.open 和window.showModalDialog

    window.open:

     window.open是非阻态窗口,也叫非模态窗口,也就是说当你打开window.open这个子窗口后,还可以切换去操作父窗口。

    一般的格式是这样的:


     
    1. <span style="font-size:14px;"><strong>window.open('page.html', 'newwindow', 'height=100, width=400, top=0, left=0, toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, status=no')   //该句写成一行代码</strong></span>  


    其中参数: 

    window.open 弹出新窗口的命令;
      'page.html' 弹出窗口的文件名; 
      'newwindow' 弹出窗口的名字(不是文件名),非必须,可用空''代替; 
      height=100 窗口高度; 
      width=400 窗口宽度; 
      top=0 窗口距离屏幕上方的象素值; 
      left=0 窗口距离屏幕左侧的象素值; 
      toolbar=no 是否显示工具栏,yes为显示; 
      menubar,表示菜单栏

         scrollbars 表示滚动栏,为yes表示页面允许滚动
      resizable=no 是否允许改变窗口大小,yes为允许; 
      location=no 是否显示地址栏,yes为允许; 
      status=no 是否显示状态栏内的信息(通常是文件已经打开),yes为允许;

    window.showModalDialog:

    window.showModalDialog表示阻态窗口,也就是打开这个窗口后,在关闭之前,不允许操作父窗口

    一般的格式是这样的:


     
    1. <strong>window.showModalDialog("modal.htm","","dialogWidth=200px;dialogHeight=100px"); </strong>  

    有些参数:

    dialogHeight:   对话框高度,不小于100px
    dialogWidth:   对话框宽度。
    dialogLeft:   离屏幕左的距离。
    dialogTop:   离屏幕上的距离。
    center:  { yes | no | 1 | 0 } :是否居中,默认yes,但仍可以指定高度和宽度。
    help:    {yes | no | 1 | 0 }: 是否显示帮助按钮,默认yes。
    resizable: {yes | no | 1 | 0 } [IE5+]:是否可被改变大小。默认no。
    status: {yes | no | 1 | 0 } [IE5+]:   是否显示状态栏。默认为yes[ Modeless]或no[Modal]。
    scroll: { yes | no | 1 | 0 | on | off }:是否显示滚动条。默认为yes。

    下面几个属性是用在HTA中的,在一般的网页中一般不使用。
    dialogHide:{ yes | no | 1 | 0 | on | off }:在打印或者打印预览时对话框是否隐藏。默认为no。
    edge:{ sunken | raised }:指明对话框的边框样式。默认为raised。
    unadorned:     默认为no。

    一般的还要与父窗口产生交互,分别使用的是window.opener和window.dialogArguments,具体的使用方法可以在网上百度,

    以后了解了也会补充的

    (2017-3-17 18:37:27)

    (补充:比如在A页面上使用window.showModalDialog 来打开一个页面B并且向其穿值过去,传值可以有多种包括数组,对象等,形式如:(在A页面上的js中)


     
    1. var obj = new Object();  
    2.           obj.name="51js";  
    3.     var jieshou = window.showModalDialog("modal.htm",obj,"dialogWidth=200px;dialogHeight=100px");  

    ,然后在B页面上接收就可以这样写:


     
    1. var obj = window.dialogArguments  
    2.           alert("您传递的参数为:" + obj.name)  

    这样就表示是你接收A页面上传过来的值,怎么杨勇就是你的事了,

    然后又想关闭页面的时候再传一个值给A页面,在B页面上这样写:


     
    1. window.returnValue="你好";  

    这样,A页面js中定义的jieshou的变量就是接收到了B页面上返回的值,这样就实现了一种子窗口和父窗口交互的形式!)

    然后是window.open的父窗口和子窗口的交互是怎么样的呢?

    比如父窗口的传参是这样的,一般来是以字符串的形式来传的,具体可以不可以传其他形式的,我目前没去深究。


     
    1. function openTable(id){    
    2. var feathers="status=no,width=650px,height=670px,top=0px,menubar=no,resizable=no,scrollbars=yes,toolbar=no,channelmode=no";    
    3. var openWin = window.open("allInfo.html?"+id+","+new Date().getTime(),"declare",feathers);    
    4. openWin.focus();    
    5. }   

    然后子窗口用window.location.search来接收问号(?)后面的值,然后再拆分字符串,得到自己想要的值。


     
    1. <span style="font-size:24px;"><script type="text/javascript">    
    2.     var params= window.location.search;//params:?id,date    
    3.         
    4.     var arr = params.substring(1).split(",");    
    5.         
    6.     var id = arr[0];    
    7. </script>  </span>  

    这样就可以得到ID,window.opener是子窗口直接操作父窗口的一种用法,比如说,子窗口关闭时候,调用window.opener.location.reload(),就可以刷新,还比如说,在子窗口页面直接操作父窗口的数据,如:window.opener.document.getElementById("name").value = "输入的数据";来通过js的方式来取值或者赋值。

  • 相关阅读:
    廖大python实战项目第六天
    廖大python实战教程第七天
    廖大python实战项目第五天
    Map的遍历方法及字符计数
    事务详解
    java设计模式详解
    程序员常见一些英文缩写
    Hibernate小笔记
    Myeclipse有关的问题
    hibernate对象的三种状态及转换
  • 原文地址:https://www.cnblogs.com/albertzhangyu/p/9128554.html
Copyright © 2011-2022 走看看