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。

相关文章

javaSE类和对象进阶用法举例详解

javaSE类和对象进阶用法举例详解

《javaSE类和对象进阶用法举例详解》JavaSE的面向对象编程是软件开发中的基石,它通过类和对象的概念,实现了代码的模块化、可复用性和灵活性,：本文主要介绍javaSE类和对象进阶用法的相关资... 目录前言一、封装1.访问限定符2.包2.1包的概念2.2导入包2.3自定义包2.4常见的包二、stati
阅读更多...
C语言中%zu的用法解读

C语言中%zu的用法解读

《C语言中%zu的用法解读》size_t是无符号整数类型,用于表示对象大小或内存操作结果,%zu是C99标准中专为size_t设计的printf占位符,避免因类型不匹配导致错误,使用%u或%d可能引发... 目录size_t 类型与 %zu 占位符%zu 的用途替代占位符的风险兼容性说明其他相关占位符验证示
阅读更多...
MySQL中EXISTS与IN用法使用与对比分析

MySQL中EXISTS与IN用法使用与对比分析

《MySQL中EXISTS与IN用法使用与对比分析》在MySQL中,EXISTS和IN都用于子查询中根据另一个查询的结果来过滤主查询的记录,本文将基于工作原理、效率和应用场景进行全面对比... 目录一、基本用法详解1. IN 运算符2. EXISTS 运算符二、EXISTS 与 IN 的选择策略三、性能对比
阅读更多...
全面解析Golang 中的 Gorilla CORS 中间件正确用法

全面解析Golang 中的 Gorilla CORS 中间件正确用法

《全面解析Golang中的GorillaCORS中间件正确用法》Golang中使用gorilla/mux路由器配合rs/cors中间件库可以优雅地解决这个问题,然而,很多人刚开始使用时会遇到配... 目录如何让 golang 中的 Gorilla CORS 中间件正确工作一、基础依赖二、错误用法（很多人一开
阅读更多...
Java Stream流之GroupBy的用法及应用场景

Java Stream流之GroupBy的用法及应用场景

《JavaStream流之GroupBy的用法及应用场景》本教程将详细介绍如何在Java中使用Stream流的groupby方法,包括基本用法和一些常见的实际应用场景,感兴趣的朋友一起看看吧... 目录Java Stream流之GroupBy的用法1. 前言2. 基础概念什么是 GroupBy？Stream
阅读更多...
Java Spring的依赖注入理解及@Autowired用法示例详解

Java Spring的依赖注入理解及@Autowired用法示例详解

《JavaSpring的依赖注入理解及@Autowired用法示例详解》文章介绍了Spring依赖注入（DI）的概念、三种实现方式（构造器、Setter、字段注入）,区分了@Autowired（注入... 目录一、什么是依赖注入（DI）？1. 定义2. 举个例子二、依赖注入的几种方式1. 构造器注入（Con
阅读更多...
详解MySQL中JSON数据类型用法及与传统JSON字符串对比

详解MySQL中JSON数据类型用法及与传统JSON字符串对比

《详解MySQL中JSON数据类型用法及与传统JSON字符串对比》MySQL从5.7版本开始引入了JSON数据类型,专门用于存储JSON格式的数据,本文将为大家简单介绍一下MySQL中JSON数据类型... 目录前言基本用法jsON数据类型 vs 传统JSON字符串1. 存储方式2. 查询方式对比3. 索引
阅读更多...
JAVA覆盖和重写的区别及说明

JAVA覆盖和重写的区别及说明

《JAVA覆盖和重写的区别及说明》非静态方法的覆盖即重写,具有多态性；静态方法无法被覆盖,但可被重写（仅通过类名调用）,二者区别在于绑定时机与引用类型关联性... 目录Java覆盖和重写的区别经常听到两种话认真读完上面两份代码JAVA覆盖和重写的区别经常听到两种话1.覆盖=重写。2.静态方法可andro
阅读更多...
C++中全局变量和局部变量的区别

C++中全局变量和局部变量的区别

《C++中全局变量和局部变量的区别》本文主要介绍了C++中全局变量和局部变量的区别,全局变量和局部变量在作用域和生命周期上有显著的区别,下面就来介绍一下,感兴趣的可以了解一下... 目录一、全局变量定义生命周期存储位置代码示例输出二、局部变量定义生命周期存储位置代码示例输出三、全局变量和局部变量的区别作用域
阅读更多...
MyBatis中$与#的区别解析

MyBatis中$与#的区别解析

《MyBatis中$与#的区别解析》文章浏览阅读314次，点赞4次，收藏6次。MyBatis使用#{}作为参数占位符时，会创建预处理语句（PreparedStatement），并将参数值作为预处理语句... 目录一、介绍二、sql注入风险实例一、介绍#（井号）：MyBATis使用#{}作为参数占位符时，会
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2