回顾JS如何向网页中输入内容,与浏览器窗口进行交互

第2章 请和我互动（常用互动方法）

本章节主要讲解如何向网页中输入内容，如何与浏览器窗口进行交互，通过简单的对象方法就可以轻松实现。

  • 2-1 JavaScript-输出内容（document.write）
  • 2-2 JavaScript-警告（alert 消息对话框）
  • 2-3 JavaScript-确认（confirm 消息对话框）
  • 2-4 JavaScript-提问（prompt 消息对话框）
  • 2-5 JavaScript-打开新窗口（window.open）
  • 2-6 JavaScript-关闭窗口（window.close）
  • 2-7 编程练习
 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>JavaScript-输出内容（document.write）</title>
 6         <script type="text/javascript">
 7             //1.内容用""括起来，直接输出内容
 8             document.write(‘今天2020-4-8‘);
 9
10             //2.通过变量输出内容
11             var ceshi="12：32";
12             document.write(ceshi);
13
14             //3.输出多项内容，之间用+号连接起来
15             var myceshi="document.write输出";
16             document.write("javascript"+myceshi);
17
18             //4.输出HTML标签，标签使用""括起来
19             var mystr="今天心情怎么样?";
20             document.write("<br />"+mystr+"&nbsp;&nbsp;"+"答：一般般");
21         </script>
22     </head>
23     <body>
24     </body>
25 </html>
 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>alert()消息对话框</title>
 6         <script type="text/javascript">
 7             //alert(字符串或者是变量);
 8             var mynum=30;
 9             alert("hello");
10             alert(mynum);
11         </script>
12     </head>
13     <body>
14         <!--alert弹出消息对话框(包含一个确定按钮)。-->
15         <img src="images/demo2-2-1.jpg" >
16         <img src="images/demo2-2-2.jpg" >
17     </body>
18 </html>
 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>JavaScript-确认（confirm 消息对话框</title>
 6         <script type="text/javascript">
 7             //confirm(str);str：在消息对话框中要显示的文本
 8             var mystr=confirm("话说今天你很好看呀");
 9             if(mystr==true){
10                 alert("笑，老实人就爱说实话");
11             }
12             else{
13                 alert("别骗我，刚我还听到你说不好看")
14             }
15         </script>
16     </head>
17     <body>
18         <p>弹出框类似下图:</p>
19         <img src="images/demo2-3.jpg" >
20     </body>
21 </html>
 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>JavaScript-提问（prompt 消息对话框）</title>
 6         <script type="text/javascript">
 7         var myname=prompt("请输入你的姓名");
 8         if(myname!=null){
 9             alert("你好"+myname);
10         }
11         else{
12             alert("你好，陌生人")
13         }
14         </script>
15     </head>
16     <body>
17 <!--         语法:
18         prompt(str1, str2);
19         参数说明：
20         str1: 要显示在消息对话框中的文本，不可修改
21         str2：文本框中的内容，可以修改
22         返回值:
23         1. 点击确定按钮，文本框中的内容将作为函数返回值
24         2. 点击取消按钮，将返回null -->
25     <img src="images/demo2-4.jpg" >
26     </body>
27 </html>
 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>JavaScript-打开新窗口（window.open）</title>
 6         <script type="text/javascript">
 7             // window.open([URL], [窗口名称], [参数字符串])
 8             function rec(){
 9                 window.open(‘http://www.dhnblog.com/‘,‘_blank‘,‘width=300,height=200,left=0,menubar=yes,toolbar=yes,scrollbars=yes,status=no‘)
10             }
11         </script>
12     </head>
13     <body>
14 <!--         URL：可选参数，在窗口中要显示网页的网址或路径。如果省略这个参数，或者它的值是空字符串，那么窗口就不显示任何文档。
15         窗口名称：可选参数，被打开窗口的名称。
16             1.该名称由字母、数字和下划线字符组成。
17             2."_top"、"_blank"、"_self"具有特殊意义的名称。
18                _blank：在新窗口显示目标网页
19                _self：在当前窗口显示目标网页
20                _top：框架网页中在上部窗口中显示目标网页
21             3.相同 name 的窗口只能创建一个，要想创建多个窗口则 name 不能相同。
22            4.name 不能包含有空格。
23         参数字符串：可选参数，设置窗口参数，各参数用逗号隔开。 -->
24         <input type="button" name="" id="" value="点我打开新窗口" onclick="rec()"/>
25         <br />
26         <img src="images/demo2-5.jpg" >
27     </body>
28 </html>
 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>JavaScript-关闭窗口（window.close）</title>
 6         <script type="text/javascript">
 7             // window.close();   //关闭本窗口
 8             // <窗口对象>.close();   //关闭指定的窗口
 9
10             // window.open(‘http://www.dhnblog.com/‘,‘_blank‘,‘top=100,left=100,width=200,height=300,menubar=yes,toolbar=yes,status=no,scrollbars=yes‘);
11             //window.close();
12
13             var mywin=window.open(‘http://www.dhnblog.com/‘,‘_blank‘,‘top=100,left=100,width=200,height=300,menubar=yes,toolbar=yes,status=no,scrollbars=yes‘);
14             // //将新打的窗口对象，存储在变量mywin中
15             mywin.close();
16         </script>
17     </head>
18     <body>
19         <p>上面代码在打开新窗口的同时，关闭该窗口，看不到被打开的窗口。</p>
20     </body>
21 </html>
 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>编程练习</title>
 6         <script type="text/javascript">
 7 /*            1、新窗口打开时弹出确认框，是否打开
 8             提示: 使用 if 判断确认框是否点击了确定，如点击弹出输入对话框，否则没有任何操作。
 9             2、通过输入对话框，确定打开的网址，默认为 http://www.dhnblog.com/
10             3、打开的窗口要求，宽400像素，高500像素，无菜单栏、无工具栏。*/
11
12             // var str=confirm(‘是否打开新窗口‘);
13             // if(str==true){
14             //     window.open(‘http://www.dhnblog.com/‘,‘_blank‘,‘width=400,height=500,menubar=no,toolbar=no‘)
15             // }
16
17             // function myceshi(){
18             //     var ceshi=prompt(‘是否打开新窗口‘,‘http://www.dhnblog.com/‘);
19             //     if(ceshi!=null){
20             //     window.open(‘http://www.dhnblog.com/‘,‘_blank‘,‘width=400,height=500,menubar=no,toolbar=no‘)
21             //     }
22             // }
23
24
25             //正确代码，上面为演示
26             function myceshi(){
27                 if(confirm(‘确定打开新窗口吗‘)){
28                     var url = prompt(‘请输入一个网址‘,‘http://www.dhnblog.com/‘)
29                 window.open(url,"_blank","toolbar=no, menubar=no, scrollbars=yes,  width=400, height=400")
30                 }
31             }
32
33         </script>
34     </head>
35     <body>
36         <input type="button" name="" id="" value="点击打开新窗口" onclick="myceshi()" />
37     </body>
38 </html>

原文地址：https://www.cnblogs.com/dhnblog/p/12663131.html

时间： 2024-10-10 12:23:25

回顾JS如何向网页中输入内容,与浏览器窗口进行交互的相关文章

mailto实现将用户在网页中输入的内容传递到本地邮件客户端

背景: 想在自己的网站中有这样一个设计: 用户点击提交按钮之后,就会打开本地邮件客户端,并自动将他在输入框中输入的内容作为邮件的内容,像下面这样: mailto可以帮助实现这个功能. 简介: mailto是一种电子邮件协议,通过该协议可以创建一个指向电子邮件地址的超级链接,通过该链接可以在Internet中发送电子邮件.就像在地址栏输入一个网址会打开一个网页一样,输入mailto:[email protected],就会打开本地邮件客户端,并将邮件发送给[email protected]. 在H

Android中WebView获取网页中标题 ,内容, 图片的方法

如题,在Android中WebView获取网页中标题 ,内容, 图片的方法 首先是获取标题,在new WebChromeClient(){}中重写onReceivedTitle()方法 @Override public void onReceivedTitle(WebView view, String title) { super.onReceivedTitle(view, title); // loge.e("__页面标题__"+title); } 获取内容,是参考的这边的 http

抓取网页中的内容、如何解决乱码问题、如何解决登录问题以及对所采集的数据进行处理显示的过程

本文主要介绍如何抓取网页中的内容.如何解决乱码问题.如何解决登录问题以及对所采集的数据进行处理显示的过程.效果如下所示: 1.下载网页并加载至HtmlAgilityPack 这里主要用WebClient类的DownloadString方法和HtmlAgilityPack中HtmlDocument类LoadHtml方法来实现.主要代码如下. var url = page == 1 ? "http://www.cnblogs.com/" : "http://www.cnblogs

网页中的内容拷贝到EXCEL之后,有些对象无法删除

大家经常会遇到从某个系统的web页面上Copy内容到Excel中,之后,会发现有一些对象,像多选框,单选框无法删除. 看A1 位置的单选框 选中之后点delete也无法删除,很是急人啊. 不过,想要删除它也非常简单, 首先,点击ctrl+G 打开定位对话框,然后定位所有的对象,点击special  然后选择objects 这样,就选中了所有的对象.然后直接点delete就可以了 网页中的内容拷贝到EXCEL之后,有些对象无法删除

js 控制 &lt;head&gt;&lt;/head&gt;中 &lt;title&gt;内容 （IE8）

关于js 控制 <head></head>中 <title>内容显示 这几天一直在调试IE8兼容性问题 开发使用浏览器为FireFox,个人觉得FireFox下很多CSS,JS规范不够严谨,在使用其他浏览器时效果不同(虽然开发时使用FireFox很酷很便捷) 之前一直这样写: $("title").text(index_name); 使用IE8如下报错: 意外地调用了方法或属性访问 正确规范写法如下: document.title = index_n

JS 导出网页中Table内容到excel

1 <html> 2 <head> 3 <script type="text/javascript" language="javascript"> 4 var idTmr; 5 function method1(tableid) {//整个表格拷贝到EXCEL中 6 var curTbl = document.getElementById(tableid); 7 var oXL = new ActiveXObject("

如何通过js获取iframe框架中的内容

在父窗口中获取iframe中的元素 IE下:格式:window.frames["iframe的name值"].document.getElementById("iframe中控件的ID").click(); 实例:window.frames["ifm"].document.getElementById("btnOk").click(); 都支持的方法:格式:document.getElementById("ifram

js各种验证文本框输入内容格式

输入框不能为空 <input onblur="if(this.value.replace(/^ +| +$/g,'')=='')alert('不能为空!')"> 只能输入英文和数字<input onblur="if(/[^0-9a-zA-Z]/g.test(value))alert('有错')"><input onkeyup="value=value.replace(/[^0-9a-zA-Z]/g,'')"/>

打印网页中指定内容

正常打印整个网页只需要window.print(); 指定内容区域打印 var newcont = document.getElementById("printPage").innerHTML; var oldcont = document.body.innerHTML; document.body.innerHTML = newcont; //把打印的内容赋值给body window.print(); //打印指定的内容 document.body.innerHTML = oldco