我是靠谱客的博主 飞快大叔,最近开发中收集的这篇文章主要介绍html中弹出窗口方式总结,觉得挺不错的,现在分享给大家,希望可以做个参考。

概述

1. showModalDialog方法

  • 法:window.showModalDialog(sURL [, vArguments] [, sFeatures])
第一个参数:目标页面的url  必须项
第二个参数:指定供目标页面使用的对象,通常设为window(即当前文档的window对象)可选项
第三个参数:指定目标窗口的装饰  可选项
(这是有模式的,无模式用showModelessDialog方法,用法一样)
  • 用法示例
test1.html关键代码
	window.onload = function()
{
document.getElementById("choose").onclick = function()
{
window.showModalDialog("./test2.html",window,"certer:yes;status:no;help:no;dialogHeight:300px;dialogWidth:400px");
}
}
test2.html关键代码
	function setValue(name,psw)
{
var superWindow = window.dialogArguments; //取得test1传过来的window对象,即superWindow就是test1的window对象
superWindow.document.getElementById("username").value = name;//利用test2中的name、psw的值给test1的两个文本框赋值,实现页面数据交互
superWindow.document.getElementById("password").value = psw;
window.close();
}
  • 注意:该方法在新版chrome中不支持,慎用

2. window对象的open方法

  • 语法:window.open( [sURL] [, sName] [, sFeatures] [, bReplace])
第一个参数:指定目标页面的URL,如果没写,则打开about:blank空白页面   可选项
第二个参数:指定打开的模式,如:新标签页打开
第三个参数:指定目标窗口的装饰
  • 用法示例
test1.html关键代码
	window.onload = function()
{
document.getElementById("choose").onclick = function()
{
window.open("./test2.html","_blank","status=no,toolbar=no,width=400,height=300");
}
}
test2.html关键代码
	function setValue(name,psw)
{
window.opener.document.getElementById("username").value = name;//window.opener取得就是父窗口的window对象,同方法1的superWindow
window.opener.document.getElementById("password").value = psw;
window.opener = null;
window.close();
}



最后

以上就是飞快大叔为你收集整理的html中弹出窗口方式总结的全部内容,希望文章能够帮你解决html中弹出窗口方式总结所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错,欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(40)

评论列表共有 0 条评论

立即
投稿
返回
顶部