javascript 浏览器JS实用程序

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了javascript 浏览器JS实用程序相关的知识,希望对你有一定的参考价值。

function autoClick(selector, timeInterval) {
    const element = document.querySelector(selector);
    if (!element) {
        console.error(`Unable to find ${selector}`);
        return;
    }

    const timeIntervalId = setInterval(() => {
        console.log(`Clicking ${selector}`);
        element.click();
    }, timeInterval);

    return {
        timeIntervalId,
        clear() {
            clearInterval(timeIntervalId);
        }
    }
}
// e.g.
let intervalHandler = autoClick("button[name='refreshButton']", 1000);
intervalHandler.clear();
function isUrlValid(url) {
    // see https://github.com/jzaefferer/jquery-validation's core.js
    return /^(?:(?:(?:https?|ftp):)?\/\/)(?:\S+(?::\S*)?@)?(?:(?!(?:10|127)(?:\.\d{1,3}){3})(?!(?:169\.254|192\.168)(?:\.\d{1,3}){2})(?!172\.(?:1[6-9]|2\d|3[0-1])(?:\.\d{1,3}){2})(?:[1-9]\d?|1\d\d|2[01]\d|22[0-3])(?:\.(?:1?\d{1,2}|2[0-4]\d|25[0-5])){2}(?:\.(?:[1-9]\d?|1\d\d|2[0-4]\d|25[0-4]))|(?:(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)(?:\.(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)*(?:\.(?:[a-z\u00a1-\uffff]{2,})).?)(?::\d{2,5})?(?:[/?#]\S*)?$/i.test(url);
}

// get query params from url and return a json object
function getQueryParams(url) {
    var query = decodeURIComponent(url.substring(url.indexOf("?")));
    var vars = query.split('&');
    var queryParams = {};
    for (var i = 0; i < vars.length; i++) {
        var pair = vars[i].split('=');
        queryParams[pair[0]] = pair[1];
    }
    return queryParams;
}
// limited within container, check if el is inside parent
function getTopLevelEnclosingNode (container, el, parent) {
    var curNode = el;
    while (curNode && curNode !== container) {
        if (curNode === parent && curNode.parentNode === container) {
            return true;
        }
        curNode = curNode.parentNode;
    }
    return false;
}
// create downloadable content/file dynamically
// embed contents in anchor's href with some meta data to tell browser that this is downloadable
// this is only good for browser that supports HTML5
//
// metadata example:
// data:text/plain;charset=utf-8 - plain text
// data:application/octet-stream - binary data such as spreadsheet, word doc
// data:application/octet-stream;charset=utf-8;base64 - binary data encoded in base64
function createDownloadLink(filename, text) {
    var metadata = 'data:text/plain;charset=utf-8,';
    var element = document.createElement('a');
    element.setAttribute('href', metadata + encodeURIComponent(text));
    element.setAttribute('download', filename);
    
    document.body.appendChild(element);
    
    // auto download with this line
    // element.click();
}

// inject styles
function addStyleString(str) {
    var node = document.createElement('style');
    node.innerHTML = str;
    document.body.appendChild(node);
}

addStyleString('input.btn { \
    color: red; \
    background-color: blue; \
    background: none; \
    box-shadow: 3px 3px 3px #AAA; }'
);

// inject css
function injectCss(link) {
    var link = document.createElement("link");
    link.href = link;
    link.type = "text/css";
    link.rel = "stylesheet";
    document.getElementsByTagName("head")[0].appendChild(link);
}

injectCss("https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css");

以上是关于javascript 浏览器JS实用程序的主要内容,如果未能解决你的问题,请参考以下文章

使用浏览器地址栏中编写的 JS 代码自动提交表单的问题

JS之 构建数据可视化的实用工具库

javaScript高级程序设计第3版笔记

前端实用工具库——轻量的纯 JavaScript 动态提示工具插件库

web性能优化的15条实用技巧

javascript 到 actionscript 按键传递实用程序?