《JavaScript 警告》A parser-blocking, cross site (i.e. different eTLD+1) script, XXX.js, is invoked via

警告：A parser-blocking, cross site (i.e. different eTLD+1) script, XXX.js, is invoked via document.write.

The network request for this script MAY be blocked by the browser in this or a future page load due to poor network connectivity.

If blocked in this page load, it will be confirmed in a subsequent console message.

See https://www.chromestatus.com/feature/5718547946799104 for more details.

翻译

解析器阻塞、跨站点（即不同的 eTLD+1）脚本 XXX.js 通过 document.write 调用。

由于网络连接不良，浏览器可能会在本次或将来的页面加载中阻止对此脚本的网络请求。

如果在此页面加载中被阻止，将在随后的控制台消息中进行确认。

原因分析

原因警告中已说明，使用 .write 或 .writeln 时！

function inputScript(url) {
    var script = '<script type="text/javascript" src="' + url + '?v=999.99999.9"><' + '/script>';
    document.writeln(script);
}

function inputCSS(url) {
    var css = '<link rel="stylesheet" href="' + url + '">';
    document.writeln(css);
}

可使用 Javascript 动态引入：

• 代码 2, 11 行，创建 <script> <link标签，分别对应 .js 和 .css 文件；
• 代码 7, 15 行，注意是添加在 body 标签里，也可根据你的需求放在 head 标签；
• 代码 3 行，使用 text/javascript 类型，也可根据你的需求使用 module；
• 代码 4 行，禁止了异步 async，defer是“渲染完再执行”，async是“下载完就执行”；

function inputScript(url) {
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.async = false;
    script.src = url;
    var el = document.querySelector('body');
    el.append(script);
}

function inputCSS(url) {
    var link = document.createElement('link');
    link.rel = 'stylesheet';
    link.href = url;
    var el = document.querySelector('body');
    el.append(link);
}