`

window.showModalDialog window.open

    博客分类:
  • js
 
阅读更多

一、window.showModalDialog获取弹出页面返回值的2种方法

----main.html---------主页面

<form name="form1">  
<input type="text" name="fag1">  
<input type="text" name="fag2">  
</form>  

function shw(){  
var url="open.html";  
//----------方法一--start-------  
var obj=document.form1; //指定页面对象  
var returnValue=window.showModalDialog(url ,obj,'dialogHeight:550px;dialogWidth:500px;center:yes'); //方法返回值  
//----------方法一--end-------  
alert(returnValue);  
}
<form name="form1">
<input type="text" name="fag1">
<input type="text" name="fag2">
</form>

function shw(){
var url="open.html";
//----------方法一--start-------
var obj=document.form1; //指定页面对象
var returnValue=window.showModalDialog(url ,obj,'dialogHeight:550px;dialogWidth:500px;center:yes'); //方法返回值
//----------方法一--end-------
alert(returnValue);
}

----open.html---------弹出页面

<input type="text" name="SNO">  
<input type="text" name="TNO">  
<input type="button" value="ok" onclick="retrunValue()">  

function retrunValue(){  
var TNO=document.all.TNO.value;  
var SNO=document.all.SNO.value;  

//----------方法二--start-------  
var obj = window.dialogArguments; //父页面对象  
obj.elements["fag1"].value = SNO; //给父页面对象赋值  
obj.elements["fag2"].value = TNO;   
//----------方法二--end-------  

//----------方法一--start-------  
window.returnValue=SNO+","+TNO; //方法返回值  
//----------方法一--end-------  
window.close();  
}
<input type="text" name="SNO">
<input type="text" name="TNO">
<input type="button" value="ok" onclick="retrunValue()">

function retrunValue(){
var TNO=document.all.TNO.value;
var SNO=document.all.SNO.value;

//----------方法二--start-------
var obj = window.dialogArguments; //父页面对象
obj.elements["fag1"].value = SNO; //给父页面对象赋值
obj.elements["fag2"].value = TNO;
//----------方法二--end-------

//----------方法一--start-------
window.returnValue=SNO+","+TNO; //方法返回值
//----------方法一--end-------
window.close();
}

二、window.open获取返回值方法

----main.html---------主页面

<script type="text/javascript">
//弹出窗口  
function openwin(url,width,height){     
    var l=window.screen.width ;     
    var w= window.screen.height;      
    var al=(l-width)/2;     
    var aw=(w-height)/2;     
    var OpenWindow=window.open(url,"弹出窗口","toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=yes,width="+width+",height="+height+",top="+aw+",left="+al+"");         
    OpenWindow.focus();  
if(OpenWindow!=null){ //弹出窗口关闭事件  
if(window.attachEvent) OpenWindow.attachEvent("onbeforeunload",   quickOut);   
if(window.attachEvent) OpenWindow.attachEvent("onunload",   quickOut);   
}  
}  
//关闭触发方法  
function quickOut()  
{  
alert("窗口已关闭");  
}  
</script>
<input type="button" value="ok" onclick="openwin('open.html','600','500')">
<input type="text" name="txt0" id="txt0"> 注意:firefox这里一定要写ID属性,不然取不到值
<script type="text/javascript">
//弹出窗口
function openwin(url,width,height){  
var l=window.screen.width ;  
var w= window.screen.height;   
var al=(l-width)/2;  
var aw=(w-height)/2;  
var OpenWindow=window.open(url,"弹出窗口","toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=yes,width="+width+",height="+height+",top="+aw+",left="+al+"");      
OpenWindow.focus();
if(OpenWindow!=null){ //弹出窗口关闭事件
if(window.attachEvent) OpenWindow.attachEvent("onbeforeunload",   quickOut);
if(window.attachEvent) OpenWindow.attachEvent("onunload",   quickOut);
}
}
//关闭触发方法
function quickOut()
{
alert("窗口已关闭");
}
</script>
<input type="button" value="ok" onclick="openwin('open.html','600','500')">
<input type="text" name="txt0" id="txt0"> 注意:firefox这里一定要写ID属性,不然取不到值

----open.html---------弹出页面

<script type="text/javascript"><!--  
function foo()  
{  
window.close();  
window.opener.document.getElementById("txt0").value=document.getElementById("txt").value   
}  
<script>
<input type=text name="txt" id="txt">
<input type=button value="关闭" onclick="foo();">
<script type="text/javascript"><!--
function foo()
{
window.close();
window.opener.document.getElementById("txt0").value=document.getElementById("txt").value
}
<script>
<input type=text name="txt" id="txt">
<input type=button value="关闭" onclick="foo();">

三、window.open 弹出新窗口的页面参数设置

'open.html' 弹出窗口的文件名,无指定值,则about:blank的新窗口会被显示;
'newwindow' 弹出窗口的名字(不是文件名),非必须,可用空''代替;
height=100 窗口高度;
width=400 窗口宽度;
top=0 窗口距离屏幕上方的象素值;
left=0 窗口距离屏幕左侧的象素值;
toolbar=no 是否显示工具栏,yes为显示;
menubar,scrollbars 表示菜单栏和滚动栏。
resizable=no 是否允许改变窗口大小,yes为允许;
location=no 是否显示地址栏,yes为允许;
status=no 是否显示状态栏内的信息(通常是文件已经打开),yes为允许;

详细例子:

<html>   
<head>   
<SCRIPT LANGUAGE="JavaScript">   
//弹出居中窗口  
function openwin(url,width,height){     
    var l=window.screen.width ;     
    var w= window.screen.height;      
    var al=(l-width)/2;     
    var aw=(w-height)/2;     
    var OpenWindow=window.open(url,"弹出窗口","toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=yes,width="+width+",height="+height+",top="+aw+",left="+al+"");      
    //OpenWindow.document.write("<TITLE>例子</TITLE>" );     
    //OpenWindow.document.write("<BODY BGCOLOR=#ffffff>" );     
    //OpenWindow.document.write("<h1>Hello!</h1>" );     
    //OpenWindow.document.write("New window opened!" );     
    //OpenWindow.document.write("</BODY>" );     
    //OpenWindow.document.write("</HTML>" );   
    OpenWindow.document.close();     
    OpenWindow.focus();  
}  
</head>   
<body>   
<a href="#" mce_href="#" onclick="openwin('','600','500')">打开一个窗口</a>   
<input type="button" onclick="openwin('','600','500')" value="打开窗口">   
</body>   
</html>

 

分享到:
评论

相关推荐

    window.showModalDialog模式对话框和 window.open的区别

    `window.showModalDialog` 和 `window.open` 都是JavaScript提供的两种打开新窗口的方法,但它们在功能和使用场景上有着显著的区别。 首先,我们来详细探讨`window.showModalDialog`。`showModalDialog`方法用于...

    window.showModalDialog以及window.open用法简介

    Window.showModalDialog 和 Window.open 用法简介 Window.showModalDialog 和 Window.open 都是 JavaScript 中的方法,用于创建新窗口或对话框,下面分别介绍它们的用法和参数。 一、Window.open() 方法 Window....

    Window.ShowModalDialog使用手册

    开发者更倾向于使用`window.open()`配合`display: none`的CSS和JavaScript来模拟模态对话框,或者使用Bootstrap、jQuery UI等库提供的模态插件。 总的来说,虽然`Window.showModalDialog()`在某些场景下仍可能有其...

    父子窗口传值window.showModalDialog以及window.open用法简介

    window.showModalDialog以及window.open用法简介

    window.showModalDialog(javascript)

    在其他浏览器中,如Firefox、Chrome和Safari,可能需要使用其他方法,如`window.open()`,配合CSS和JavaScript来实现类似的效果。 - 模态对话框可能会对用户体验造成影响,因为它会阻塞用户的交互,因此在现代Web...

    window.showModalDialog方法的使用

    因此,在开发过程中,更推荐使用`window.open`配合`display: none`的CSS来实现类似的效果,或者使用现代前端框架(如Bootstrap的模态组件)来创建模态对话框。 为了提高跨浏览器兼容性和用户体验,可以考虑以下替代...

    ShowModalDialog与window.open的区别

    ### ShowModalDialog与window.open的区别 #### 一、概述 在Web开发中,有时需要创建新的浏览器窗口或对话框来实现特定功能,如显示警告、输入数据等交互操作。JavaScript 提供了两种常用的方法来创建这类窗口:`...

    js的window.showModalDialog及window.open用法实例分析

    JavaScript中的`window.showModalDialog`和`window.open`都是用于打开新窗口的方法,但它们有着不同的特性和用途。 首先,`window.open`方法是JavaScript中最常见的打开新窗口的方式,它适用于所有的主流浏览器,如...

    window.showModalDialog('d.html',fault,'');

    在实际开发中,开发者可能会寻找更现代、更兼容的替代方法,如 `window.open`、Bootstrap 模态框、Vue 或 React 的自定义组件等。 压缩包中的 'd.html' 文件可能是用来展示 `showModalDialog` 的示例页面,而 'c....

    showModalDialog open弹出子窗口操作parent、opener父窗口及跨域处理

    1&gt; window.showModalDialog()采用JS原理实现,同时父窗口不可操作,window.open()采用新创建一个窗口,同时父窗口可操作; 2&gt; 父窗口与子窗口传递值的方式也有所不同,在子窗口中操作父窗口也语法也不同,分别为var...

    浅谈JavaScript窗体Window.ShowModalDialog使用

    JavaScript中的`window.showModalDialog()`方法是一个用于打开模态对话框的功能,主要在IE浏览器中得到广泛支持(从IE4开始)。模态对话框是一种特殊的弹出窗口,它强制用户在处理当前对话框之前不能与页面上的其他...

    'window.ShowModalDialog'在Chrome中不起作用

    描述中提到的解决方案是使用 `window.open()` 方法来替代 `showModalDialog()`. `window.open()` 可以创建一个新的浏览器窗口或者打开一个已经存在的窗口,并且可以设置新窗口的各种属性,如位置、大小、是否显示...

    JavaScript中window.showModalDialog()用法详解

    今天在项目中用到了弹出子窗口,就想到了用JavaScript实现的两种方法,一个是window.open();一个是window.showModalDialog()方法,后者是存在父子关系的一种弹出窗口,只有子窗关闭,父窗口才激活,并且可以传送参数...

    showModalDialog和window.open

    ### showModalDialog和window.open在Web开发中的应用与区别 在Web开发中,`showModalDialog`和`window.open`是两种用于打开新窗口或对话框的方法,但它们各自有着独特的特性和应用场景。以下是对这两种方法的详细...

    使用selenium测试showModalDialog模态对话框

    这段代码首先定义了一个JavaScript字符串,用于重写 `showModalDialog` 方法,将其替换为 `window.open` 函数,这样对话框将以非模态窗口的形式打开,Selenium 就可以继续执行并选中这个新窗口。然后,代码模拟点击...

    JS控制弹出页面窗口控件(openWin)

    window.open()和window.showModalDialog(),并解决了showModalDialog()弹出窗口中列表分页的问题。 提供了三个JS方法: (1)showWindow(sURL, width, height); (2)showWindowInPage(pageUrl, params, title, ...

    window.showModalDialog参数传递中含有特殊字符的处理方法

    程序没有改动过运行一直正常,突然... 代码如下: “[removed]window.showModalDialog(‘Info.aspx?bh=” + Server.UrlEncode(e.Row.Cells.FromKey(“编号”).Text.Trim()) + “‘,null,’dialogWidth:750px;dialogHeig

Global site tag (gtag.js) - Google Analytics