JavaScript全屏与弹窗函数实战示例

需积分: 9 89 浏览量更新于2024-12-27 收藏 11KB TXT 举报

"这篇资源主要展示了JavaScript中与打开新窗口相关的精华代码，包括弹启全屏窗口、模拟F11全屏、自定义尺寸窗口以及使用`showModalDialog`和`showModelessDialog`方法创建模态和非模态对话框的示例。" 在JavaScript编程中，打开新窗口是一项常见的功能，可以用于导航、显示信息或者提供用户交互界面。以下是对这些代码段的详细解释： 1. 弹启一个全屏窗口： ```html <html> <body onload="window.open('http://www.pconline.com.cn', 'example01', 'fullscreen');"> <b>www.e3i5.com</b> </body> </html> ``` 这段代码会在页面加载完成后使用`window.open()`函数打开一个全屏窗口，URL指向`http://www.pconline.com.cn`，窗口名称为`example01`，参数`fullscreen`使得窗口以全屏模式启动。 2. 模拟F11全屏模式： ```html <html> <body onload="window.open('http://www.pconline.com.cn', 'example02', 'channelmode');"> <b>www.e3i5.com</b> </body> </html> ``` `channelmode`这个参数在某些浏览器中可以模拟F11全屏效果，但并不是所有浏览器都支持此选项，其效果可能因浏览器而异。 3. 自定义尺寸的窗口： ```html <html> <body onload="window.open('http://www.pconline.com.cn', 'example03', 'width=400,height=300,directories');"> <b>www.e3i5.com</b> </body> </html> ``` 这里设置了新窗口的宽度为400像素，高度为300像素，并且包含目录栏(`directories`)。`width`和`height`参数可以自定义新窗口的大小。 4. 使用`showModalDialog`创建模态对话框： ```html <html> <script language="javascript">  </script> <b>www.e3i5.com</b> </body> </html> ``` `showModalDialog()`方法用于打开一个模态对话框，它阻塞了父窗口的交互，直到对话框关闭。参数是一个包含各种设置的字符串，如对话框的尺寸、位置、是否可帮助、可调整大小和状态栏等。 5. 使用`showModelessDialog`创建非模态对话框： ```html <html> <script language="javascript">  </script> <b>www.e3i5.com</b> </body> </html> ``` `showModelessDialog()`方法与`showModalDialog()`类似，但它是非模态的，允许用户同时与对话框和父窗口进行交互。同样，参数字符串定义了对话框的特性。这些代码示例展示了JavaScript在控制浏览器窗口行为上的灵活性，可用于创建更丰富的用户体验。在实际应用中，需要注意跨浏览器兼容性和用户隐私设置，确保功能在不同环境下都能正常工作。

展开

JavaScript精华代码2
1.弹启一个全屏窗口

<html>
<body onload=window.open('http://www.pconline.com.cn','example01','fullscreen');>;
<b>www.e3i5.com</b>
</body>
</html>

　　2.弹启一个被F11化后的窗口

<html>
<body onload=window.open(''http://www.pconline.com.cn','example02','channelmode');>;
<b>www.e3i5.com</b>
</body>
</html>

　　3.弹启一个带有收藏链接工具栏的窗口

<html>
<body onload=window.open

('http://www.pconline.com.cn','example03','width=400,height=300,directories');>
<b>www.e3i5.com</b>
</body>
</html>

　　4.网页对话框

<html>