回顾JS如何向网页中输入内容,与浏览器窗口进行交互
Posted 我的前端梦
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了回顾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+" "+"答：一般般"); 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>
以上是关于回顾JS如何向网页中输入内容,与浏览器窗口进行交互的主要内容，如果未能解决你的问题，请参考以下文章
android使用WebView里的js与android进行交互！