蓁祎家进步中

# js常见方法

返回：大前端 | 返回：最全导引

🌿 一些经典常用功能 🌿 错误处理技巧总结
js排序算法 replace的高阶用法
JS调试-console JavaScript 有趣和棘手（坑爹？）的示例
JSON.stringify() callback和promise到async/await
移动端网页调用摄像头的 2 种方式

# js实现复制功能

# 第一种：浏览器Copy功能

<textarea cols="20" rows="10" id="tkl">
素乐小风扇usb便携式手持小型随身可充电学生宿舍女桌面办公室桌上手拿握迷你电小米大风力超静音n9儿童电扇
【在售价】48
【券后价】38.00
【返红包】0.33
--------------------
【领券下单】复制￥1ikI1q4OnJk￥打开手机淘宝领券并下单</textarea>
<input type="button" onClick="copyTkl()" value="立即领券" />
1
2
3
4
5
6
7
8
<script type="text/javascript">
function copyTkl() {
    var tkl=document.getElementById("tkl");
    tkl.select(); 
    document.execCommand("Copy"); 
    alert("复制淘口令成功......");
}
</script>
1
2
3
4
5
6
7
8

# 第二种：clipboard.js

github

<input type="text" id="tkl" />
 <button type="button" id="copyTkl">立即领券</button>
1
2
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.7.1/clipboard.min.js"></script>
<script type="text/javascript">
$('#copy').on('click', function () {
  var value = $('#copyTkl').val();
  $('#copyTkl').attr('data-clipboard-text', value);
  var clipboard = new Clipboard('#copyTkl');
  clipboard.on('success', function (e) {
    alert("复制淘口令成功......");
  });
  clipboard.on('error', function (e) {
    alert("复制淘口令失败......");
  });
})
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

# 第三种：纯JS，对第一种进行改进

function copyTkl() {
   const range = document.createRange();
   range.selectNode(document.getElementById('tkl'));
   const selection = window.getSelection();
   if (selection.rangeCount > 0) selection.removeAllRanges();
      selection.addRange(range);
      document.execCommand('copy');
     alert("复制淘口令成功......");
}
1
2
3
4
5
6
7
8
9

# js关闭打开浏览器窗口

# window.open()方法

let windowObjectReference = window.open(strUrl, strWindowName, [strWindowFeatures]);
1
  • WindowObjectReference
    • 打开的新窗口对象的引用。如果调用失败，返回值会是 null 。如果父子窗口满足“同源策略”，你可以通过这个引用访问新窗口的属性或方法。
    • 如果strUrl 是一个空值，那么打开的窗口将会是带有默认工具栏的空白窗口（加载about:blank）。
  • strUrl
    • 新窗口需要载入的url地址。strUrl可以是web上的html页面也可以是图片文件或者其他任何浏览器支持的文件格式。
  • strWindowName
    • 新窗口的名称。该字符串可以用来作为超链接 <a> 或表单 <form> 元素的目标属性值。字符串中不能含有空白字符。注意：strWindowName 并不是新窗口的标题。
    • 如果要在每次调用 window.open()时都打开一个新窗口，则要把参数 strWindowName 设置为 _blank。
  • strWindowFeatures
    • 可选参数。是一个字符串值，这个值列出了将要打开的窗口的一些特性(窗口功能和工具栏) 。 字符串中不能包含任何空白字符，特性之间用逗号分隔开。参考下文的位置和尺寸特征。

TIP

调用window.open()方法以后，远程 URL 不会被立即载入，载入过程是异步的。（实际加载这个URL的时间推迟到当前脚本块执行结束之后。窗口的创建和相关资源的加载异步地进行。）

# window.close()方法

Window.close() 方法关闭当前窗口或某个指定的窗口。

该方法只能由 Window.open() 方法打开的窗口的 window 对象来调用。如果一个窗口不是由脚本打开的，那么，在调用该方法时，JavaScript 控制台会出现类似下面的错误：

  • 不能使用脚本关闭一个不是由脚本打开的窗口。
  • 或 Scripts may not close windows that were not opened by script. 。

同时也要注意，对于由 HTMLIFrame​Element​.content​Window 返回的 Window 对象，close() 也没有效果。

# window.opener属性

如果当前窗口是由另一个窗口打开的, window.opener保留了那个窗口的引用. 如果当前窗口不是由其他窗口打开的, 则该属性返回 null.

  • 导航新的页面

只要赋给 location 对象一个新值，文档就会使用新的 URL 加载，就好像使用修改后的 URL 调用了 window.location.assign() 一样。
需要注意的是，安全设置，如 CORS（跨域资源共享），可能会限制实际加载新页面。

window.location.assign("http://www.mozilla.org"); // or
window.location = "http://www.mozilla.org";
1
2
  • 强制重新加载当前页
window.location.reload(true);
1
  • 获取一个 window.location.search 键值（key value）
function loadPageVar (sVar) {
  return decodeURI(window.location.search.replace(new RegExp("^(?:.*[&\\?]" + encodeURI(sVar).replace(/[\.\+\*]/g, "\\$&") + "(?:\\=([^&]*))?)?.*$", "i"), "$1"));
}

alert(loadPageVar("name"));
1
2
3
4
5

# 不带任何提示关闭窗口的js代码

<a href="javascript:window.opener=null;window.open('','_self');window.close();">关闭</a>
1

# 自定义提示关闭

<script language="javascript">
   // 这个脚本是 ie6和ie7 通用的脚本
   function custom_close(){
      if (confirm("您确定要关闭本页吗？")){
         window.opener=null;
         window.open('','_self');
         window.close();
      }else{
      }
   }
</script>
1
2
3
4
5
6
7
8
9
10
11

# 关闭窗口兼容性写法

function CloseWebPage(){
//. ie浏览器
   if (navigator.userAgent.indexOf("MSIE") > 0) {
      if (navigator.userAgent.indexOf("MSIE 6.0") > 0) {
        window.opener = null;
        window.close();
      } else {
        window.open('', '_top');
        window.top.close();
      }
   }//火狐浏览器
     else if (navigator.userAgent.indexOf("Firefox") > 0) {
       window.location.href = 'about:blank ';
   } else {//谷歌等其他浏览器
      window.opener = null;
      window.open('', '_self', '');
      window.close();
   }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

# 刷新父页面

window.opener.location.href = window.opener.location.href;

function closeMeAndReloadParent(){
  opener.location.reload();
  // 或者 window.opener.location.reload();
  window.close();
}
1
2
3
4
5
6
7