分类 JavaScript 相关 下的文章

动态加载JS 动态添加CSS 转换页面DIV 为pdf

动态加载JS

function loadScript(scriptUrl, callback) {
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = scriptUrl;
    document.head.appendChild(script);
    callback();
}

loadScript("https://code.jquery.com/jquery-3.3.1.min.js", function() {
    console.log("loading script");
    setTimeout(function () {
        console.log("loading done");
            //部分DIV 变为整个页面
        $("body").html($('#sbo-rt-content').wrap('<p/>').parent().html());
            //动态添加CSS
        $(document.head).append(`<style>
            @media print {
                #sbo-rt-content {
                    background-color: white;
                    height: 100%;
                    width: 100%;
                    position: fixed;
                    top: 0;
                    left: 0;
                    margin: 0;
                    padding: 15px;
                    font-size: 14px;
                    line-height: 18px;
                }
            }
        </style>`);
            //打印
        window.print();
    }, 3000);
});

chrome extension: Run Your JavaScript

Run Your JavaScript is a chrome extension, with it you can build your chrome extension features.

what's it?
it is a chrome extension to run your own Javascript with extension's advantages.

why use it?

  1. it can simplify your development. Normally you access third party APIs in your web server by given user name or token, and your web page call your web server API, but with this extension, you can call third party APIs on chrome, like web page access them, no need extra user name & token, just login on third party web page;
  2. use chrome proxy automatically, especially with 2FA authentication proxy.
  3. Access 3rd party API without Cross-Origin Resource Sharing issue.

how use it?
write your Javascript and put it on your web server, then put the Javascript link in this extention, and give it a name, then you can expect it to run.

is it safe?
Yes, it is absolutely safe, you can view all the source code on github;

source code:
https://github.com/manecocomph/RunYourJavaScript

find it in chrome store: https://chrome.google.com/webstore/detail/run-your-javascript/aiokpplkfhfbijcmbpgpbomigegncfab

escape, encodeuri, encodeURIComponent 区别

这里有3对:
escape / unescape
encodeuri / decodeuri
encodeURIComponent / decodeURIComponent

  1. escapse/unescapse 已经被废弃,不要再用;
  2. encodeuri/decodeuri 一般用来编码整个url,过滤对url有意义的特殊字符;
  3. encodeURIComponent/decodeURIComponent 一般用来编码url 参数的数据,编码的内容作为数据而存在;

这个问答里面有个详细的编码字符表:https://stackoverflow.com/questions/14317861/difference-between-escape-encodeuri-encodeuricomponent

javascript 正则表达式 贪婪和非贪婪模式

关于 javascript 正则表达式

例子: 取出主机名第一部分

var hostNameRe = new RegExp("^(.+)\\.(.+)");
var result = hostNameRe.exec("sh005.cloud.tianxiaoui.com");
console.log(result[1]);
console.log(result[2]);

运行代码:

sh005.cloud.tianxiaoui
com

这明显不是我想要的, 我只想要第一部分的片段, 这个表达式是贪婪模式

var hostNameRe = new RegExp("^(.+?)\\.(.+)");

只要多加一个? 就改成了非贪婪模式.

x*?
x+?
Matches the preceding item x like * and + from above, however the match is the smallest possible match.
For example, /".*?"/ matches '"foo"' in '"foo" "bar"' and does not match '"foo" "bar"' as without the ? behind the *.

一个简单的类似 jquery的 ajax get 函数

function get(url, callback) {
    var xhr = new XMLHttpRequest();
    xhr.open('GET', url, true);
    xhr.overrideMimeType('text/plain; charset=x-user-defined');

    xhr.onreadystatechange = function(e) {
      if (this.readyState == 4 && this.status == 200) {
            callback(this.responseText);
      }
    };
    xhr.send();
}