Browse Source

记录js获取url参数

kindring 2 years ago
parent
commit
c9d8729bc8
2 changed files with 158 additions and 2 deletions
  1. 149 0
      js/copy.js
  2. 9 2
      js/urlControl.js

+ 149 - 0
js/copy.js

@@ -0,0 +1,149 @@
+/**
+ * @description 复制文字内容到剪切板,更多内容参见:https://www.zhangxinxu.com/wordpress/?p=10150
+ * @author zhangxinxu(.com)
+ * @created 2021-10-22
+ */
+
+ var copyText = function (button, content, success) {
+    if (!button) {
+        return;
+    }
+
+    if (typeof content == 'function') {
+        success = content;
+        content = null;
+    }
+
+    success = success || function () {};
+
+    // 是否降级使用
+    var isFallback = !navigator.clipboard;
+
+    if (typeof button == 'string' && !content) {
+        if (content === false) {
+            isFallback = true;
+        }
+        content = button;
+        button = null;
+    }
+
+    var eleTextarea = document.querySelector('#tempTextarea');
+    if (!eleTextarea && isFallback) {
+        eleTextarea = document.createElement('textarea');
+        eleTextarea.style.width = 0;
+        eleTextarea.style.position = 'fixed';
+        eleTextarea.style.left = '-999px';
+        eleTextarea.style.top = '10px';
+        eleTextarea.setAttribute('readonly', 'readonly');
+        document.body.appendChild(eleTextarea);
+    }
+
+    var funCopy = function (text, callback) {
+        callback = callback || function () {};
+
+        if (!isFallback) {
+            navigator.clipboard.writeText(text).then(function () {
+                callback();
+                // 成功回调
+                success(text);
+            }, function() {
+                // 禁止写入剪切板后使用兜底方法
+                copyText(text, false);
+                callback();
+                // 成功回调
+                success(text);
+            });
+
+            return;
+        }
+
+        eleTextarea.value = text;
+        eleTextarea.select();
+        document.execCommand('copy', true);
+
+        callback();
+        // 成功回调
+        success(text);
+    };
+
+    if (!button) {
+        funCopy(content);
+        return;
+    }
+
+    // 事件绑定
+    button.addEventListener('click', function (event) {
+        var strCopy = content;
+        if (content && content.tagName) {
+            strCopy = content.textContent || content.value;
+        }
+        // 复制的文字内容
+        if (!strCopy) {
+            return;
+        }        
+
+        funCopy(strCopy, function () {
+            // 复制成功提示
+            var eleTips = document.createElement('span');
+            eleTips.className = 'text-popup';
+            eleTips.innerHTML = '复制成功';
+            document.body.appendChild(eleTips);
+            // 事件
+            eleTips.addEventListener('animationend', function() {
+                eleTips.parentNode.removeChild(eleTips);
+            });
+            // For IE9
+            if (!history.pushState) {
+                setTimeout(function () {
+                    eleTips.parentNode.removeChild(eleTips);
+                }, 1000);
+            }
+            eleTips.style.left = (event.pageX - eleTips.clientWidth / 2) + 'px';
+            eleTips.style.top = (event.pageY - eleTips.clientHeight) + 'px';
+        });
+    });
+
+    var strStyle = '.text-popup { animation: textPopup 1s both; -ms-transform: translateY(-20px); color: #01cf97; user-select: none; white-space: nowrap; position: absolute; z-index: 99; }@keyframes textPopup {0%, 100% { opacity: 0; } 5% { opacity: 1; } 100% { transform: translateY(-50px); }}'
+
+    var eleStyle = document.querySelector('#popupStyle');
+    if (!eleStyle) {
+        eleStyle = document.createElement('style');
+        eleStyle.id = 'popupStyle';
+        eleStyle.innerHTML = strStyle;
+        document.head.appendChild(eleStyle);
+    }
+};
+
+/**
+ * 输入文字到剪切板
+ * @param {string} content 
+ * @returns 
+ */
+function copyText (content){
+    return new Promise((resolve,reject)=>{
+        // 判断是否支持 clipboard api 复制
+        try {
+            if (navigator.clipboard) {
+                navigator.clipboard.writeText(content).then(resolve).catch(reject);
+            } else {
+                let textarea = document.createElement('textarea');
+                // 隐藏此输入框
+                textarea.style.position = 'fixed';
+                textarea.style.opacity = '0';
+                textarea.style.top = '20px';
+                document.body.appendChild(textarea);
+                // 赋值
+                textarea.value = content;
+                // 选中
+                textarea.select();
+                // 复制
+                document.execCommand('copy', true);
+                // 移除输入框
+                document.body.removeChild(textarea);
+            }
+            resolve('ok');
+        } catch (error) {
+            reject(error);
+        }
+    })
+}

+ 9 - 2
js/urlControl.js

@@ -7,7 +7,11 @@
  * @LastDescript: 
  * @LastDescript: 
  */
  */
 
 
-
+/**
+ * 裁切又?分隔的字符串
+ * @param {*} str 
+ * @returns 
+ */
 function getUrlParams(str) {
 function getUrlParams(str) {
     return str.split('&').reduce((acc, current) => {
     return str.split('&').reduce((acc, current) => {
         current = current.split('=')
         current = current.split('=')
@@ -15,4 +19,7 @@ function getUrlParams(str) {
         return acc
         return acc
     }, {})
     }, {})
 }
 }
-console.log(getUrlParams('imei=1234&id=5'));
+console.log(getUrlParams('imei=1234&id=5'));
+
+// 获取当前页面参数 
+let urlQuery = window.location.search