window.showModalDialog 和 window.open的区别以及用法

2024-03-06 01:58
文章标签 用法 区别 window open showmodaldialog

本文主要是介绍window.showModalDialog 和 window.open的区别以及用法，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

一、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" οnclick="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" οnclick="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" οnclick="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" οnclick="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="关闭" οnclick="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="关闭" οnclick="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="#" οnclick="openwin('','600','500')">打开一个窗口</a>   
<input type="button" οnclick="openwin('','600','500')" value="打开窗口">   
</body>   
</html>

这篇关于window.showModalDialog 和 window.open的区别以及用法的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/778499。

相关文章

C#中async await异步关键字用法和异步的底层原理全解析

C#中async await异步关键字用法和异步的底层原理全解析

《C#中asyncawait异步关键字用法和异步的底层原理全解析》：本文主要介绍C#中asyncawait异步关键字用法和异步的底层原理全解析,本文给大家介绍的非常详细,对大家的学习或工作具有一... 目录C#异步编程一、异步编程基础二、异步方法的工作原理三、代码示例四、编译后的底层实现五、总结C#异步编程
阅读更多...
go 指针接收者和值接收者的区别小结

go 指针接收者和值接收者的区别小结

《go指针接收者和值接收者的区别小结》在Go语言中,值接收者和指针接收者是方法定义中的两种接收者类型,本文主要介绍了go指针接收者和值接收者的区别小结,文中通过示例代码介绍的非常详细,需要的朋友们下... 目录go 指针接收者和值接收者的区别易错点辨析go 指针接收者和值接收者的区别指针接收者和值接收者的
阅读更多...
售价599元起! 华为路由器X1/Pro发布 配置与区别一览

售价599元起! 华为路由器X1/Pro发布 配置与区别一览

《售价599元起!华为路由器X1/Pro发布配置与区别一览》华为路由器X1/Pro发布，有朋友留言问华为路由X1和X1Pro怎么选择，关于这个问题，本期图文将对这二款路由器做了期参数对比，大家看... 华为路由 X1 系列已经正式发布并开启预售，将在 4 月 25 日 10:08 正式开售，两款产品分别为华
阅读更多...
python3 gunicorn配置文件的用法解读

python3 gunicorn配置文件的用法解读

《python3gunicorn配置文件的用法解读》：本文主要介绍python3gunicorn配置文件的使用,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录python3 gunicorn配置文件配置文件服务启动、重启、关闭启动重启关闭总结python3 gun
阅读更多...
MySQL 中的 LIMIT 语句及基本用法

MySQL 中的 LIMIT 语句及基本用法

《MySQL中的LIMIT语句及基本用法》LIMIT语句用于限制查询返回的行数,常用于分页查询或取部分数据,提高查询效率,：本文主要介绍MySQL中的LIMIT语句,需要的朋友可以参考下... 目录mysql 中的 LIMIT 语句1. LIMIT 语法2. LIMIT 基本用法(1) 获取前 N 行数据(
阅读更多...
C#中DrawCurve的用法小结

C#中DrawCurve的用法小结

《C#中DrawCurve的用法小结》本文主要介绍了C#中DrawCurve的用法小结,通常用于绘制一条平滑的曲线通过一系列给定的点,具有一定的参考价值,感兴趣的可以了解一下... 目录1. 如何使用 DrawCurve 方法（不带弯曲程度）2. 如何使用 DrawCurve 方法（带弯曲程度）3.使用Dr
阅读更多...
Python 中的 with open文件操作的最佳实践

Python 中的 with open文件操作的最佳实践

《Python中的withopen文件操作的最佳实践》在Python中,withopen()提供了一个简洁而安全的方式来处理文件操作,它不仅能确保文件在操作完成后自动关闭,还能处理文件操作中的异... 目录什么是 with open()？为什么使用 with open()？使用 with open() 进行
阅读更多...
C++ vector的常见用法超详细讲解

C++ vector的常见用法超详细讲解

《C++vector的常见用法超详细讲解》：本文主要介绍C++vector的常见用法,包括C++中vector容器的定义、初始化方法、访问元素、常用函数及其时间复杂度,通过代码介绍的非常详细,... 目录1、vector的定义2、vector常用初始化方法1、使编程用花括号直接赋值2、使用圆括号赋值3、ve
阅读更多...
MySQL中FIND_IN_SET函数与INSTR函数用法解析

MySQL中FIND_IN_SET函数与INSTR函数用法解析

《MySQL中FIND_IN_SET函数与INSTR函数用法解析》：本文主要介绍MySQL中FIND_IN_SET函数与INSTR函数用法解析,本文通过实例代码给大家介绍的非常详细,感兴趣的朋友一... 目录一、功能定义与语法1、FIND_IN_SET函数2、INSTR函数二、本质区别对比三、实际场景案例分
阅读更多...
pytorch之torch.flatten()和torch.nn.Flatten()的用法

pytorch之torch.flatten()和torch.nn.Flatten()的用法

《pytorch之torch.flatten()和torch.nn.Flatten()的用法》：本文主要介绍pytorch之torch.flatten()和torch.nn.Flatten()的用... 目录torch.flatten()和torch.nn.Flatten()的用法下面举例说明总结torch
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2