HTML入门教程：打开新窗口和弹出窗口
|
一、 基本变化 参数解释： window.open 弹出新窗口的命令; "page.html” 弹出窗口的文件名; "newwindow” 弹出窗口的名字(不是文件名)，非必须，可用空””代替; 100 窗口高度; width=400 窗口宽度; top=0 窗口距离屏幕上方的象素值; left=0 窗口距离屏幕左侧的象素值; toolbar=no 是否显示工具栏，yes为显示; menubar，scrollbars 表示菜单栏和滚动栏。 resizable=no 是否允许改变窗口大小，yes为允许; location=no 是否显示地址栏，yes为允许; status=no 是否显示状态栏内的信息(通常是文件已经打开)，yes为允许; 二、 弹启一个全屏窗口 加入fullscreen 三、 打开一个和按F11所见到的一样的窗口 加入channelmode 四、 打开一个连标题栏都没有的窗口(无标题、最小、最大、以及关闭按钮) 看看，什么效果? 如果把resizable 设为0 scrollbars = no 呢? 五、 没有最大化按纽的窗口 其实也就是象软件的“关于我们”的那个窗口一样，下面就是用对话 框窗口来实现它。 showModalDialog()以及showModelessDialog() 1.用showModalDialog() www.veryhuo.com 2.用showModelessDialog() www.veryhuo.com 至于showModalDialog()与showModelessDialog()的区别，在于showModalDialog()打开的窗口(简称模式窗口)，置在父窗口上，必须关 闭才能访问父窗口(建议尽量少用，以免招人反感);showModelessDialog() (简称无模式窗口)，打开后不必关闭也可访问父窗口打开的窗口。 现在我将这里的一些参数说明一下。 dialogHeight: iHeight 设置对话框窗口的高度。 dialogWidth: iWidth 设置对话框窗口的宽度。 dialogLeft: iXPos 设置对话框窗口相对于桌面左上角的left位置。 dialogTop: iYPos 设置对话框窗口相对于桌面左上角的top位置。 center: {yes | no | 1 | 0 } 指定是否将对话框在桌面上居中，默认值是“yes”。 help: {yes | no | 1 | 0 } 指定对话框窗口中是否显示上下文敏感的帮助图标。默认值是“yes”。 resizable: {yes | no | 1 | 0 } 指定是否对话框窗口大小可变。默认值是“no”。 status: {yes | no | 1 | 0 } 指定对话框窗口是否显示状态栏。对于非模式对话框窗口，默认值是“yes”;对于模式对话框窗口，默认值是 “no”。 六、 弹出n 个窗口 这很简单，只要执行n 次window.open()就行了，当然一定要给每个窗口起不同的名字，还有，设置一下left和top，避免重叠。 七、 刷新之后就不再弹出窗口 我们使用cookie来控制一下就可以了。 首先，将如下代码加入主页面HTML的区： 然后，用(注意不是openwin而是loadpop啊!) 替换主页面中原有的这一句即可。你可以试着刷新一下这个页面或重新进入该页面，窗口再也不会弹出了。 八、 让弹出窗口适应里面图片的大小 很多时候我们需要提供这样的功能给访问者：当访问者点击页面中的缩略图时，其对应的全尺寸图片将显示在一个新的弹出窗口中供访问者查看。 实现此功能的最简单作法是用以下HTML代码创建一个图像链接： 其中标记的href属性指定全尺寸图片的URL，target属性设置为_blank指定在新窗口中显示该图片;标记的src属性指定缩略图的URL。 如果我们想对显示全尺寸图片的窗口的外观进行某些控制(比如希望弹出窗口的高度、宽度能与全尺寸图片的大小匹配时)，则可调用 window.open方法，该方法接收三个参数，分别指定要打开文件的URL，窗口名及窗口特性，在窗口特性参数中可指定窗口的高度、宽度，是否显示菜单栏、工具栏等。以下代码将显示全尺寸图片在一个没有工具栏、地址栏、状态栏、菜单栏，宽、高分别为400、350的窗口中。 这里就提出了个问题，如果所有全尺寸图片都具有统一的大小(比如都是400×350)，那么以上代码适用于所有的缩略图片链接(只是href属性指向的全尺寸图片文件不同)。但如果全尺寸图片的大小并不统一，还用以上代码则我们需要先取得每幅全尺寸图片的大小，然后在window.open方法的窗口 特性参数中一一设置height和width为正确的值，在图片数量较多的情况下，这显然效率太低了。那么是否有一劳永逸的方法，即让弹出窗口能自动适应要显示图片的大小?通过研究，发现可以使用 DHTML 中的 Image 对象来达到我们的目的，Image 对象可动态装载指定的图片，通过读取其 width 和 height 属性即能获得装入图片的大小，以此来设置弹出窗口的大小，即可实现自适应图片大小的弹出窗口了。下面即是实现代码: 使用时将上面的代码放在网页文档的标记对中，然后在链接的点击事件中调用OpenFullSizeWindow函数，即可。以上代码在IE 5.x-6.0中测试通过。 九、 比较灵活的HTA窗口 我简单介绍一下，HTA的全名为HTML Application，翻译过来就是HTML应用程序，你只要简单的用.hta为扩展名保存HTML页面就算创建了一个HTA文件，下面我们就用HTA来编个窗口，将以下这段代码保存为.hta文件，然后再用浏览器打开看看吧。 推荐阅读 HTML中文手册：http://www.veryhuo.com/a/manual/html （编辑：核心网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
