<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#moveto{
height: 50px;
50px;
}
</style>
</head>
<body>
<!-- <input type="button" value="打开窗口" onclick="openWin()" />
<br><br>
<input type="button" value="移动窗口" onclick="moveWin()" /> -->
</body>
<script>
/*
1.但是谷歌火狐都不生效 ,
safari 没有试 , ie生效了 , 因为他是ie自家的方法 , 不是ECMAscript的标准方法
*/
// document.getElementById("moveto").onclick=function(){
// // alert("按钮被点击");
// // 把窗口向下移动100像素
// window.moveBy(0,100)
// // 把窗口移动到左上角
// // window.moveTo(200,300); // 过时的属性
// }
/*
2.获取窗口大小
*/
// let pageWidth = window.innerWidth; //返回视口大小，也就是屏幕页面可视区域的大小
// pageHeight = window.innerHeight;
// console.log('初始',pageWidth)
// console.log('初始',pageHeight)
// if(typeof pageWidth != "number") {
// // 检查pageWidth是不是一个数值，如果不是，则通过compatMode来检查页面是否处于标准模式
// if(document.compatMode == "CSS1Compat") {
// pageWidth = document.documentElement.clientWidth;// 等同于innerWidth
// pageHeight = document.documentElement.clientHeight;
// console.log('标准模式',pageWidth)
// console.log('标准模式',pageHeight)
// } else {
// pageWidth = document.body.clientWidth; // 可见视口，布局视口
// pageHeight = document.body.clientHeight;
// console.log('非标准',pageWidth)
// console.log('非标准',pageHeight)
// }
// }
// console.log('最后结果',pageWidth)
// console.log('最后结果',pageHeight)
/*
3.视口位置--滚动
*/
// window.scrollBy(0,100); // 相对于当前视口向下滚动11像素
// window.scrollTo(0,0); // 滚动到
// window.scrollTo({
// left: 100,
// top: 100,
// behavior: 'auto', // 正常滚动--是否平滑smooth
// })
/*
4.window.open()
打开浏览器(网址，窗口名，属性...)
*/
// window.open("https://www.baidu.com/","newborder",
// "height=400,width=400,top=10,left=10,resizable=yes");
// // 检测浏览器内置的弹窗屏蔽程序阻止弹窗
// let blocked = fasle;
// try {
// let wroxWin = window.open("https://www.baidu.com/","_block");
// if(wroxWin == null) {
// blocked = true;
// }
// } catch (error) {
// blocked = true;
// }
// if(blocked){
// alert("住址了弹窗")
// }
/*
5.location对象
不仅保存当前加载文档的信息，也保存把url解析为离散片段后能通过属性访问
*/
// console.log(location.host); // 服务器名及端口号
// console.log(location.search); // url的查询字符串，这个字符串以问号开头
// 获取地址栏指定参数
// let getQueryStringArgs = function() {
// // 取得没有开头问号的查询字符串
// let qs = (location.search.length > 0 ? location.search.substring(1) : ""),
// // 保存数据的对象
// args = {};
// // 把每个参数添加到args对象
// for(let item of qs.split("&").map(kv => kv.split("="))){
// let name = decodeURIComponent(item[0]),
// value = decodeURIComponent(item[1]);
// if(name.length){
// args[name] = value
// }
// }
// return args;
// }
// // 假设查询的字符串是为?q=javascript&num=10
// let args = getQueryStringArgs();
// alert(args["q"]);
// alert(args["num"]);
// 方法二。接口---URLSearchParams构造函数传入一个查询字符串，就可以创建一个实例
// let qs = "?q=javascript&num=10"; // 或者传入一个demo参数
// let qs = location.search; //获取地址栏上的参数
// let searchParams = new URLSearchParams(qs);
// alert(searchParams.toString);
// console.log(searchParams.has("num")); // true
// console.log(searchParams.get("num")); // 10
// searchParams.set("page","3");
// alert(searchParams.toString);
// searchParams.delete("q")
// for(let param of searchParams) {
// console.log(param);
// }
/*
6.改变地址--页面重新加载新URL
window.location = "https://baidu.com";
location.href = "";
location.assign = "";
*/
/*
7. 检测插件
plugins数组
*/
// 插件检测，IE10及更低的版本无效
// let hasPlugin = function(name) {
// name = name.toLowerCase(); // 转换为小写
// for(let plugin of window.navigator.plugins) {
// if(plugin.name.toLowerCase().indexOf(name) > -1) {
// return true;
// }
// }
// return false;
// }
// // 检测Flash
// alert(hasPlugin("Flash"));
// // 检测QuickTime
// alert(hasPlugin("QuickTime"));
/*
8. 注册处理程序
registerProtocolHandler()
这个方法可以把一个网站注册为处理某种特定类型信息应用程序
*/
/*
9.history对象
前进和后退
history.go(1); // 前进一页
history.go(-1); // 后退一页
history.back(); // 后退一页
history.forward(); // 前进一页
*/
// if(history.length == 1){
// // 这是用户窗口中的第一个页面
// }
/*
10.用户代理
--来获取客户端运行的环境和主机的信息
*/
console.log(window.navigator.userAgent);
// screen--查询像素、浏览器朝向变化（移动版）、屏幕角度
/*
11.获取地理位置--（https环境下可用）
*/
// navigator.geolocation.getCurrentPosition((position) => {
// p = position;
// console.log(p.timestamp); // 查询时间的时间戳
// console.log(p.coords); // 返回Coordinates对象（包含经度纬度，精度，海拔，速度，朝向，）
// },(e) => {
// // 失败的回调
// console.log(e.code);
// console.log(e.message);
// })
/*
12.联网状态
*/
console.log(navigator.onLine); // true是否联网（局域网也算）
// navigator.connection.addEventListener('change',changeHandler);
// const changeHandler = () => {
// console.log('bianhua');
// }
/*
13.文档信息
修改页面标题
获取 url
*/
// let originalTitle = document.title; //读取文档标题
// console.log('原标题',originalTitle);
// document.title = "New page title"
// let url = document.URL;
// console.log('取得完整的域名',url); // 取得完整的域名 http://127.0.0.1:5500/dom%E6%B5%8F%E8%A7%88%E5%99%A8%E5%AF%B9%E8%B1%A1%E6%A8%A1%E5%9E%8B.html
// let domain = document.domain;
// console.log('取得域名',domain); // 取得域名 127.0.0.1
// let referrer = document.referrer;
// console.log('取得来源',referrer); // 取得来源
/*
14.定位元素
document.getElementById("myDiv"); 获取元素的id
documnet.getElementsByTagName("img"); 获取元素的签名
*/
/*
15. 文档写入
document.write();
document.writeln();
document.open();
document.close();
*/
/*
16.取得属性
getAttribute();
setAttribute();
removeAttribute();
*/
/*
17.创建元素
document.createElement();
*/
</script>
</html>